背景图片hover加蒙层_css如何实现鼠标移至图片上显示遮罩层及文字

可以使用伪类`:hover`来实现背景图片hover加蒙层的效果。具体步骤如下：

1. 给需要添加蒙层的元素设置`position: relative;`，以便在其内部添加绝对定位的遮罩层。

2. 在元素内部添加一个`div`元素作为遮罩层，设置其宽高与父元素相同，并设置其`position: absolute;`和`top: 0; left: 0;`，使其覆盖在父元素上方。

3. 设置遮罩层的背景色或者背景图片，并设置其不透明度`opacity`小于1，以实现透明效果。

4. 初始状态下，将遮罩层的`opacity`设为0，当鼠标移至父元素上时，使用伪类`:hover`来设置遮罩层的`opacity`为1，显示遮罩层。

5. 如果需要在遮罩层上显示文字，可以在遮罩层内部添加一个`div`元素，并设置其`position: absolute;`和`z-index: 1;`来将其置于遮罩层上方。然后在该元素内部添加需要显示的文字元素。

示例代码如下：

HTML:

<div class="container">
  <div class="image">
    <div class="overlay">
      <div class="text">这是一段文字</div>
    </div>
  </div>
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  position: relative;
}

.image {
  background-image: url('your-image-url');
  background-size: cover;
  width: 100%;
  height: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 蒙层颜色，透明度为0.5 */
  opacity: 0; /* 初始状态下蒙层透明度为0 */
  transition: opacity 0.5s ease-in-out; /* 设置过渡效果 */
}

.overlay:hover {
  opacity: 1; /* 鼠标移至元素上方时，蒙层透明度为1，显示蒙层 */
}

.text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将文字居中显示 */
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}