CSS 可以在图像悬停时创建透明的黑色叠加层吗？

使用 CSS 对图像悬停进行黑色透明叠加：深入方法

查询：

我可以创建一个透明的黑色叠加层，当鼠标悬停在图像上时仅使用CSS？

回复：

是的，您可以使用 CSS 实现图像悬停时的透明黑色叠加效果。操作方法如下：

使用伪元素的替代方法：

您可以在图像上利用伪元素，而不是使用覆盖元素。该方法提高了响应能力并多功能性：

HTML：

<div class="image">
    <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

CSS：

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

说明：

• 位置：相对于.image 元素允许伪元素相对于其父元素定位自身。
• vertical-align: top 修复图像上的基线对齐方式。
• :after 伪元素使用以下命令创建覆盖层绝对定位和黑色半透明背景。
• 应用不透明度过渡以实现平滑过渡

在悬停时添加文本（可选）：

要在悬停时显示文本，请将伪元素的 content 属性设置为所需的文本：

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

以上是CSS 可以在图像悬停时创建透明的黑色叠加层吗？的详细内容。更多信息请关注PHP中文网其他相关文章！