如何使用CSS为图片添加叠加层？我的实现方案无效，求解决

你可以通过以下两种常用方式给图片添加叠加层，无需复杂操作：

方法一：无需修改HTML，用CSS伪元素 #

保持你原有的HTML结构不变，添加以下CSS即可生成叠加层：

<!-- 你的原始HTML -->
<div class="banner_img">  
    <img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px">
</div> 

.banner_img {
  position: relative;
  display: inline-block; /* 让容器自适应图片宽度 */
}

/* 生成叠加层伪元素 */
.banner_img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 示例为半透明黑色叠加层，可自定义颜色和透明度 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 可选：如果要加文字，取消注释并修改 */
  /* content: '叠加提示文字'; */
  /* color: white; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.banner_img img {
  display: block; /* 消除图片下方默认空白 */
}

方法二：新增叠加层元素（更灵活，适合加额外内容） #

修改HTML结构，新增专门的叠加层div，这种方式方便在叠加层上添加文字、按钮等内容：

<div class="banner_img">  
    <img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px">
    <!-- 新增叠加层容器 -->
    <div class="overlay">这里可以加文字或按钮</div>
</div> 

.banner_img {
  position: relative;
  display: inline-block;
}

.banner_img .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 半透明红色叠加层，可自定义颜色和透明度 */
  background-color: rgba(255, 0, 0, 0.3);
  /* 可选：让叠加层内的内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.banner_img img {
  display: block;
}

可选：hover时才显示叠加层 #

如果想要鼠标悬停时才显示叠加层，给叠加层添加默认隐藏、hover时显示的样式即可。以伪元素方法为例，修改CSS：

.banner_img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s; /* 平滑过渡动画 */
}

.banner_img:hover::after {
  opacity: 1; /* hover时显示 */
}

内容的提问来源于stack exchange，提问作者Nikhil Sarker