怎么给图片加从顶部到底部的透明到黑色的渐变

最新推荐文章于 2023-09-18 17:50:52 发布

jsBugYao

最新推荐文章于 2023-09-18 17:50:52 发布

阅读量430

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_53244180/article/details/128756406

版权

通过在img的类选择器中添加一个伪类::after，可以创建一个覆盖全图的蒙层。这个蒙层使用了线性渐变，从透明至黑色，模拟出遮罩效果。同时，可以通过调整滤镜属性如blur和brightness，实现图片的模糊和亮度改变，以此增强视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

就是在img的类里面加一个蒙层伪类就能实现这个效果

   &::after {
                // 相当于加了一层遮罩
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                background:linear-gradient(rgba(0,0,0,0.2)0%,rgba(0,0,0,.9)95%);/* 默认渐变位置从上往下 */
                z-index: 1;
                // filter: blur(10px) brightness(95%); // 模糊半径和变暗
                opacity: 0.9;
            }
        }