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);
}

有什么办法可以定位这个 ::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 和 display 也是：

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>

CSS ::after 伪元素可以适应其父元素的大小吗？

1 个答案: