时间戳

首页 > 解决方案 > CSS ::after 伪元素可以适合其父元素的大小吗？

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

问题描述

我想在图像上添加渐变。有没有办法在 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 使其完全适合图像上方？

标签： csspseudo-element

解决方案

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>

推荐阅读