：课后不使用img标签[重复]答案

【问题标题】：:after class not working with img tag [duplicate]：课后不使用img标签[重复]
【发布时间】：2023-03-12 05:50:02
【问题描述】：

我想在图像上悬停时添加背景颜色叠加效果。但是我用css pseudo-class: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:aftercontent 没有显示，但是当我在 <p> 或 <span>tag 上使用 :after 类时它正在工作，并且我打算在我的 <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添加红色背景颜色有什么问题吗？

【问题讨论】：

:after 仅适用于可以包含文本内容的容器元素（因为它通过在初始内容之后附加内容来工作），所以正如您所发现的，不幸的是它不适用于 img，您需要使用包装元素并将其附加到该元素上。

标签： css

【解决方案1】：

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

由于<img>是一个自闭空标签（也称为空元素），不能包含其他元素，伪元素，不能使用:after 或:before。

Empty element - 空元素列表

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

【讨论】：

【解决方案2】：

您需要将img 包装在块元素中才能使用:after 或伪元素。

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

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

【讨论】：

【解决方案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;
}

【讨论】：