CSS添加蒙层效果

给元素添加蒙层效果

原图

效果图

思路：

蒙层盒子在父元素下，给父元素设置相对定位，给蒙层（子元素）设置绝对定位，让蒙层和父元素重合，给蒙层设置透明度即可。

代码如下：

css

img {
                width: 200px;
                height: 300px;
            }

            li {
                position: relative;

            }

            .Mask {
                width: 200px;
                height: 300px;
                background-color: rgb(0 0 0 / 65%);
                position: absolute;
                top: 0;
                left: 0;
            }

HTML

<ul>
            <li>
                <img src="images/31.jpg" alt="">
                <div class="Mask">

                </div>
            </li>
       </ul>