渐变叠加图像答案

【问题标题】：Gradient overlay image渐变叠加图像
【发布时间】：2021-04-24 11:51:01
【问题描述】：

我正在尝试在图像上放置渐变叠加。但是当我用 :after 伪类放置渐变时似乎没有任何效果

我正在尝试重新创建的图像效果：https://p221.p4.n0.cdn.getcloudapp.com/items/X6ueRLQZ/8e2b620d-9f22-4ba5-a414-45be7f614147.png?v=660238ff4322e9f1b6494f751bc1117f

尝试使用纯 CSS 来实现。想我需要一个渐变，也许还需要一些灰度滤镜才能将图像变成黑色/白色。出于某种原因，我的渐变没有应用到图像顶部。

HTML

<img src="https://images.unsplash.com/photo-1568579998406-c2886c8323f5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" style="width: 300px; height: 240px;" alt="some alt text" class="cow">

我的 CSS

.cow {
  position: relative;
}

.cow:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
 background: linear-gradient(#25333d 0%, rgba(37, 51, 61, 0) 100%);
}

工作 JSFiddle：https://jsfiddle.net/6evb5p0r/

【问题讨论】：

这能回答你的问题吗 - stackoverflow.com/questions/7396469/…
不这么认为吗？我已将类 cow 应用于我的 img 元素并将伪 :after 元素应用于牛类，所以它是 cow:after ?
将你的伪 ::after 移动到父包装器 div 例如并在其上应用覆盖
oohhh... 这是有道理的！谢谢！那解决了问题。请作为答案发布:)

标签： html css image gradient

【解决方案1】：

例如，将您的伪 ::after 移动到父包装器一个 div 并在其上应用覆盖。谢谢。

.cow {
  position: relative;
  display: inline-block;
}

.cow:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#25333d 0%, rgba(37, 51, 61, 0) 100%);
}

<div class="cow">
  <img src="https://images.unsplash.com/photo-1568579998406-c2886c8323f5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" style="width: 300px; height: 240px;" alt="some alt text">
</div>

【讨论】：