CSS3遮罩透明滤镜效果--mix-blend-mode混合方式

CSS3遮罩透明滤镜效果--mix-blend-mode混合方式

        text-shadow: 0 5px 10px rgba(0,0,0,0.1);

        box-shadow: 0 5px 10px rgba(0,0,0,0.5);

        background-color: rgba(0,0,0,0.3);

文本投影、盒子投影、背景色，三者结合在一起使用，制作如下效果

html:

<section class="box">
<h1>CSS3遮罩透明滤镜效果</h1>
</section>

css:

*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
.box{
height: 100vh;
background-image: url("./img/glass2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.box h1{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 10em;
color: #fff;
text-transform: uppercase;
text-shadow: 0 5px 10px rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.3);
/* 叠加 */
mix-blend-mode:overlay;
/* 正片叠底 */
/* mix-blend-mode:multiply; */

/* 柔光 */
/* mix-blend-mode: soft-light; */

/* 变亮(这个模式，在该效果中无效) */
/* mix-blend-mode: lighten; */

/* 颜色加深 */
/* mix-blend-mode: color-burn; */
}

说明：

vh：1vh等于视口高度的1%，

比如：浏览器高度950px，1 vh = 950px/100 = 9.5 px,

你设置100vh,,height:100vh;相对于视窗的高度, 视窗被均分为100单位的vh。

mix-blend-mode该属性的作用是将一个元素同其父标签的元素发生混合：

混合方式有以下几种：

mix-blend-mode: normal;          //正常

mix-blend-mode: multiply;        //正片叠底

mix-blend-mode: screen;          //滤色

mix-blend-mode: overlay;         //叠加

mix-blend-mode: darken;          //变暗

mix-blend-mode: lighten;         //变亮

mix-blend-mode: color-dodge;     //颜色减淡

mix-blend-mode: color-burn;      //颜色加深

mix-blend-mode: hard-light;      //强光

mix-blend-mode: soft-light;      //柔光

mix-blend-mode: difference;      //差值

mix-blend-mode: exclusion;       //排除

mix-blend-mode: hue;             //色相

mix-blend-mode: saturation;      //饱和度

mix-blend-mode: color;           //颜色

mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始

mix-blend-mode: inherit;         //继承

mix-blend-mode: unset;           //复原

其中，multiply属性可以将图片的白色背景变成透明。