Question

我想在悬停在图像上时添加背景颜色叠加效果。但是我已经尝试了几次css伪类:after，它只是不起作用，代码为：

<div class="test">
  <img src="assets/img/slide1.jpeg" class="overlay" alt="">
   <!-- my image tag -->
</div>

css：

  .test{
  width: 50%;
  height: 50%;
}

.overlay{
  width: 100%;
  height: 100%;
  position: relative;
}

.overlay:after{
  content: "test";
  position: absolute;
  font-size:3em;
}

.overlay:after内容未显示，但当我在:after或<p>标记上使用<span>课程时，它正在运行，而我打算添加将<img>标记上的颜色效果叠加为：

/*adding background color on the image tag using :after*/
.overlay:after{
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 0;
}

所以我的问题是： 1.为什么伪类:after没有处理img标记但使用<p>或<h1>等文本标记？ 2.使用:after添加红色bg颜色的代码有什么问题吗？

Answer 1

伪元素只能在包含元素上声明; 可以包含其他元素的元素，例如：<p>，<span>，<h1>等。

由于<img>是自动关闭的空标记（也称为空元素），不能包含其他元素，无法使用伪元素，例如:after或:before。

Empty element - 空元素列表

空元素是HTML，SVG或MathML中不能的元素有任何子节点（即嵌套元素或文本节点）。

Answer 2

您需要将img包含在块元素中以使用:after或伪造元素。

＆＃13;

.overlay{
  position:relative;
  width: 50%;
  height: 50%;
}

.overlay img{
  width: 100%;
}

/*adding background color on the image tag using :after*/

.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 1;
  opacity: 0.4;
}

＆＃13;

<div class="test">
  <div class="overlay">
    <img src="http://via.placeholder.com/350x150" alt="hola">
  </div>
</div>

＆＃13;

Answer 3

将:after伪元素插入到应用它的元素内，作为其最后一个子元素。由于img代码无法生成子代，:after对其无效。

相反，您可以将叠加层应用于其父元素：

<div class="wrap">
    <img src="http://via.placeholder.com/350x150">
</div>

CSS：

.wrap {
    position: relative;
}
.wrap img {
    display: block;
}
.wrap:hover:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: red;
}

：课后不使用img标签

3 个答案: