«

CSS添加蒙层效果

时间:2023-3-5 19:34     作者:小诸葛     分类: 前端     正在检查是否收录...


给元素添加蒙层效果

原图

CSS添加蒙层效果

效果图

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>

蒙层

推荐阅读:


扫描二维码,在手机上阅读