線性漸變、背景尺寸、定位、混合模式綜合實現蒙版遮罩
實現CSS3主要屬性：
background: linear-gradient( dir, color1, color2,...); //先定義一個線型漸變
background-size: 400% 400%; // 把線型漸變擴大，默認可視盒子的顏色就是線性漸變其中的一部分顏色
transition: .5s all; //增加過渡效果
//:hover的時候運用定位將可視盒子定位到線性漸變其他顏色部分
:hover{
background-position: 100% 100%;
}
圖片的透明處理：
opacity: .5; //爲了給底層圖片增加透明效果
mix-blend-mode: screen; //透明效果會出現多層透明，運用混合模式解決
/*混合模式(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屬性可以將圖片的白色背景變成透明*/
拉走源碼看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.container{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 500px;
height: 500px;
cursor: pointer;
/*通過線型漸變和背景大小、定位、過渡實現遮罩效果*/
background: linear-gradient(to bottom right,#000 0%,#000 25%,#1e539e 50%,#f25 75%,#7800a8 100%);
background-size: 400% 400%;
transition: 0.5s all;
}
.box:hover{
background-position: 100% 100%;
}
.img{
background: url(http://www.zmdd95.com/images/dome.jpg) no-repeat center center;
width: 100%;
height: 100%;
opacity: .5;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="img"></div>
</div>
</div>
</body>
</html>