渐变叠加图像

Question

我正在尝试在图像上放置渐变覆盖。但当我把梯度放在伪类之后时，似乎没有任何效果

我试图重现的图像效果：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/

Answer 1

将您的pseudo:：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>