渐变叠加图像

Question

我正在尝试在图像上放置渐变叠加层。但是当我用 :after pseudo-class

放置渐变时似乎没有任何效果

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

尝试用纯 CSS 来做到这一点。我想我需要一个渐变，也许还需要一些灰度滤镜才能将图像变成 black/white。出于某种原因，我的渐变没有应用到图像之上。

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/

Answer 1

例如将您的伪::after 移动到父包装器a 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>

渐变叠加图像

Gradient overlay image

html

css

gradient

image