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

可以使用CSS的伪类选择器`:hover`以及`::before`或`::after`伪元素来实现背景图片hover加蒙层的效果。

具体实现步骤如下：

1. 给需要添加背景图片的元素设置一个相对定位的父级元素，并设置背景图片。

2. 给该父级元素设置一个宽高和`overflow:hidden`，以隐藏超出父级元素的内容。

3. 使用`::before`或`::after`伪元素来创建一个遮罩层，并设置其宽高和背景颜色，透明度等属性。

4. 给遮罩层添加`transition`属性，以实现渐变过渡效果。

5. 使用`opacity`属性来控制遮罩层的透明度，当鼠标移至图片上时，通过`:hover`伪类选择器来控制遮罩层的透明度。

6. 在遮罩层中添加需要显示的文字或其他内容。

示例代码如下：

HTML：

<div class="box">
  <div class="bg"></div>
  <div class="mask">
    <h2>这是遮罩层</h2>
    <p>这是遮罩层中的文字内容</p>
  </div>
</div>

CSS：

.box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(图片地址) no-repeat center center;
  background-size: cover;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.box:hover .mask {
  opacity: 1;
}