CSS如何为非background引入的img图片添加渐变效果

直接给<img>标签设置渐变背景不生效的核心逻辑很简单：img是替换元素，src引入的外部图片内容会绘制在元素背景层的上方，你写在CSS里的渐变背景会被加载的实体图片完全遮挡，自然看不到效果。
另外你原本写的渐变参数也有问题：两端颜色都是完全不透明的纯黑、纯白，就算正确叠加到图片上，也会把图片完全盖住，看不到任何原图内容。

完全保留原有img标签的语义、加载逻辑、SEO属性，只需要给img的父容器加伪元素作为渐变遮罩即可，不需要改动HTML结构。

注意：<img>本身是替换元素，不支持::before/::after伪元素，所以遮罩层需要加在它的父级元素（你代码里包裹img的<a>标签就很合适）上。

完整CSS代码如下：

/* 给img的父级a标签设置定位、裁切、匹配原有尺寸样式 */
.picture_list_first a {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    /* 把原本写在img上的margin移到父级，避免定位偏移 */
    margin: 0px -20px 0px -30px;
}

/* 伪元素生成渐变遮罩，叠在图片上方 */
.picture_list_first a::after {
    content: '';
    position: absolute;
    /*  inset:0 等价于 top/right/bottom/left:0，直接铺满父容器 */
    inset: 0;
    /* 渐变终点设置为透明，才能透出下方的图片，可自行调整透明度数值控制渐变浓度 */
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(255,255,255,0) 100%);
    /* 让遮罩层不拦截鼠标点击，保证a标签跳转正常 */
    pointer-events: none;
}

/* 调整原有img样式，清除默认间隙 */
.picture_list_first img {
    width: 330px;
    height: 332px;
    border-radius: 5px;
    display: block;
}

如果你不想操作父元素，也可以直接在img上用多背景叠加，保留img标签的同时实现渐变效果，本质是把图片和渐变都放在img的背景层，需要注意该方案相当于还是用了背景图逻辑，会丢失部分img原生特性：

.picture_list_first img {
    width: 330px;
    height: 332px;
    border-radius: 5px;
    margin: 0px -20px 0px -30px;
    display: block;
    /* 多背景顺序：上层渐变在前，下层图片在后 */
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(255,255,255,0) 100%), url('/img/oporto.jpg');
    background-size: cover;
    background-position: center;
    /* 隐藏src加载的原图，显示背景层的叠加效果 */
    content: '';
}

非特殊场景更推荐用第一种伪元素遮罩的方案，完全符合你不想用背景图实现效果的需求。

内容的提问来源于stack exchange，提问作者vlexx