CSS 图像叠加悬停标题

当鼠标悬停在一个带有图片的标题上时，可以使用 CSS 实现一个图像叠加的效果，增加互动性和美观性。本文将演示如何使用 CSS 实现这个效果。

实现步骤

首先，在 HTML 中创建一个带有图片的标题元素。例如：

<h2 class="title">
  <img src="image.jpg" alt="Title" />
  Title
</h2>

然后，在 CSS 中添加样式来实现图片叠加的效果。具体步骤如下：

1. 设置标题的 position 为相对定位（relative），以使后续绝对定位的伪元素相对于该元素定位。
2. 设置标题背景图片为所需的底图，并将其铺满整个标题元素。
3. 创建一个伪元素（::before 或 ::after），设置其大小与标题元素相同。
4. 将该伪元素的 position 设置为 absolute，使其相对于标题元素进行绝对定位。
5. 设置伪元素的 z-index 为较高的值，使其显示在底图之上。
6. 设置伪元素的 content 为一个空字符串，让其显示出来。
7. 设置伪元素的背景图片为所需的叠加图。

具体样式代码如下：

.title {
  position: relative;
  background: url('image.jpg');
  /* 其他样式 */
}

.title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url('overlay.png');
  opacity: 0;
  transition: opacity 0.3s ease;
}

.title:hover::before {
  opacity: 1;
}

在这段代码中，.title 是标题元素的类名，image.jpg 是底图的文件名，overlay.png 是叠加图的文件名。通过设置 .title 的 position 为 relative，使其成为伪元素的父元素，可以通过子元素选择器 ( ::before ) 来选择该元素的伪元素。

另外值得注意的是，此处使用了 opacity 来控制叠加图的透明度，实现了悬停叠加的效果。

总结

本文介绍了如何使用 CSS 实现图片叠加的悬停标题效果。通过设置底图和叠加图，以及使用伪元素来实现叠加的效果，可以增加页面的互动性和美观性。希望对大家有所帮助！