css bendmode 叠加效果,类似ps的图层叠加模式



下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

    <title>CSS Blen Modes</title>
        body {
            margin: 0;
            font-family: Georgia, serif;

        .page-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: url('/bfwrepo/image/demo.jpg') no-repeat, linear-gradient(to left, #225378, #1695A3);
            background-blend-mode: normal;
            background-size: cover;

        .container {
            width: 80%;
            color: #FFF;

        h1 {
            font-size: 8rem;
            margin-bottom: .5rem;
            letter-spacing: -1.25rem;
            color: #1695A3;

        h1 span:nth-child(2n) {
            color: #225378;

        h1 span {
            mix-blend-mode: screen;

        label {
            font-size: 1.5rem;
            font-weight: 700;

        select {
            margin-top: 1rem;
            display: block;

@media screen and (min-width: 1024px) {
            .page-wrap {
                padding-right: 2.5%;
                justify-content: flex-end;

            .container {
                max-width: 45%;


<body translate="no">
    <div class="page-wrap">
        <div class="container">
            <h1><span>C</span><span>S</span><span>S</span> <span>B</span><span>l</span><span>e</span><span>n</span><span>d</span></h1>
                CSS Blend Modes let us blend an element&rsquo;s background layer with another layer. They allow blending between background images, gradients, and background colors.
                <label for="color">Pick a CSS Blend Mode:</label>
                <select id="color" class="jsColor">
                    <option value="normal">normal</option>