一个CSS::after伪元素可以适合它的父元素的大小吗?

Question

我想在图片上添加一个渐变。在CSS中使用::after元素是否有办法做到这一点?图片的尺寸是未知的，位置是静态的。

HTML:

<span class="gradient">
<img src="https://i.stack.imgur.com/uZ2WS.gif">
</span>

CSS:

.gradient img::after{
content: "";
background-image: linear-gradient(#000, #ffffff00);
}

是否有办法定位this::after，使其完全适合图像的上方?

Answer 1

position和display可以:

span {
position: relative;
display: inline-block;
}
span::after {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
content: "";
background-image: linear-gradient(#000, #ffffff00);
}

<span class="gradient">
<img src="https://i.stack.imgur.com/uZ2WS.gif">
</span>

mix-blend-mode和displaytoo:

span {
display: inline-block;
background-image: linear-gradient(#000, #ffffff00);
}
img {
mix-blend-mode: multiply;
}

<span class="gradient">
<img src="https://i.stack.imgur.com/uZ2WS.gif">
</span>