css bendmode 叠加效果，类似ps的图层叠加模式-html代码-BFW代码库

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

代码语言：html

所属分类：背景

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

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

    <title>CSS Blen Modes</title>
    <style>
        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;
        }

        p,
        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%;
            }

        }
    </style>

</head>
<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>
            <p>
                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.
            </p>
            <form>
                <label for="color">Pick a CSS Blend Mode:</label>
                <select id="color" class="jsColor">
                    <option value="normal">normal</option>
               .........完整代码请登录后点击上方下载按钮下载查看