css 混合模式

小鱼儿 2022-03-09 06:23 258阅读 0赞

css的混合模式类似ps里的正片叠底功能，

混合模式可以是图片和背景色混合，也可以是图片和图片混合，设置方式有两种background-blend-mode 和mix-blend-mode；

混合模式Multiply，`screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color`,和`luminosity`. `normal`

`可归类：`

![20190312161537527.png][]

详细api

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

详细内容可查看：[https://www.w3cplus.com/css3/basics-css-blend-modes.html][https_www.w3cplus.com_css3_basics-css-blend-modes.html]

`效果如下图：图2是鼠标经过后的效果`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 2][]

**代码实现：**

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .bgImg1\{  
                width: 400px;  
                height: 250px;  
                background: url(timg.jpg);  
                background-color: red;  
                background-size: 400px 250px;  
                background-blend-mode:multiply;  
            \}  
            .bgImg1:hover\{  
                background-color: \#fff;  
            \}  
            .bg\{  
                width: 400px;  
                height: 250px;  
                background: url(timg.jpg);                  
                background-size: 400px 250px;  
                position: relative;  
            \}  
            .bigImg2\{  
                width: 400px;  
                height: 250px;  
                background-color: \#00ffcd;  
                mix-blend-mode:multiply;  
                position: absolute;  
                top: 0px;  
                left: 0px;  
            \}  
        </style>  
    </head>  
    <body>  
        <div class="bgImg1"></div>  
        <div class="bg">  
            <div class="bigImg2"></div>  
        </div>  
    </body>  
</html>

**利用css混合模式实现动画**

![20190312160620561.gif][]

**代码实现：**

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            html,body\{  
                position: relative;  
                overflow: hidden;  
                width: 100%;  
                height: 100%;  
                margin: 0px;  
                padding: 0px;  
                background-image: linear-gradient(90deg,\#fff 49.9%,\#000 50%);  
            \}  
            .text\{  
                position: absolute;  
                font-size: 63px;  
                width: 350px;  
                height: 80px;  
                line-height: 80px;  
                text-align: center;  
                color: \#fff;  
                top: 50%;  
                left: 50%;  
                margin-top: -40px;  
                margin-left: -350px;  
                overflow: hidden;  
                mix-blend-mode:difference;  
                animation: textanimate 6s ease infinite;  
            \}  
            @keyframes textanimate\{  
                0%\{  
                    margin-left: -350px;  
                \}  
                50%\{  
                    margin-left: 0px;  
                \}  
                100%\{  
                    margin-left: -350px;  
                \}  
            \}  
        </style>  
    </head>  
    <body>  
        <div class="text">Hello Word</div>  
    </body>  
</html>

[20190312161537527.png]: /images/20220309/9fdb3547d4ff4f10843378128c8bdc6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20220309/6229f391604b40a6adf24d6633a19eff.png
[https_www.w3cplus.com_css3_basics-css-blend-modes.html]: https://www.w3cplus.com/css3/basics-css-blend-modes.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190312155518544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 2]: /images/20220309/559c36a37c1f4bc590c00c763cc498bc.png
[20190312160620561.gif]: /images/20220309/a32eb98dd29e4c60a1c2a8fe94ee1284.png