线性渐变实现蒙版遮罩

线性渐变、背景尺寸、定位、混合模式综合实现蒙版遮罩

实现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://zmdd95.com/images/2.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>

来源：CSDN

作者：栈木地

链接：https://blog.csdn.net/amdd9582/article/details/86646983

标签

混合模式