css如何实现鼠标移至图片上显示遮罩层及文字

### 回答1：
可以使用CSS中的伪类:hover来实现鼠标移至图片上显示遮罩层及文字的效果。具体实现方法如下：

1. 首先，在HTML中添加一个包含图片的容器，例如：

<div class="img-container">
<img src="image.jpg" alt="图片">
<div class="overlay">
<p>这是图片的描述文字</p>
</div>
</div>

2. 在CSS中设置容器的position为relative，遮罩层的position为absolute，并设置其宽度、高度、背景颜色和透明度等样式，例如：

.img-container {
position: relative;
}

.overlay {
position: absolute;
top: ;
left: ;
width: 100%;
height: 100%;
background-color: rgba(, , , .5);
opacity: ;
transition: opacity .3s ease;
}

3. 当鼠标移至容器上时，使用:hover伪类来改变遮罩层的透明度，例如：

.img-container:hover .overlay {
opacity: 1;
}

4. 最后，为遮罩层中的文字设置样式，例如：

.overlay p {
color: #fff;
font-size: 16px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这样就可以实现鼠标移至图片上显示遮罩层及文字的效果了。

### 回答2：
在CSS中实现鼠标移至图片上显示遮罩层及文字可以使用以下步骤：

1. 首先，我们需要一个容器来放置图片和遮罩层以及文字。可以使用div元素来作为容器，也可以使用figure元素。

2. 接着，为容器设置一个相对定位的位置，并将其宽度和高度设置为图片的宽度和高度。这里需要使用绝对定位的元素作为遮罩层并将其位置设置为0。

3. 给遮罩层添加半透明的背景色，并设置其宽度和高度为百分比。这里建议使用rgba颜色值来设置背景色，以便于调整透明度。

4. 最后，使用绝对定位的元素在遮罩层上添加文字。可以使用text-align属性来设置文字居中对齐。

下面是实现鼠标移至图片上显示遮罩层及文字的CSS代码和示例：

HTML代码：

<div class="container">
  <img src="image.jpg">
  <div class="mask">
    <p>这是一段文字</p>
  </div>
</div>

CSS代码：

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

img {
  width: 100%;
  height: 100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.mask p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 20px;
}

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

在上述示例中，我们设置了一个名为“container”的div元素来放置图片和遮罩层以及文字。在CSS中，我们为容器设置了一个相对定位的位置，并将其宽度和高度设置为300px和200px来适应图片的大小。

接着，我们添加了一张图片，并使用CSS将其宽度和高度设置为100%。这样可以确保图片始终占满整个容器。

然后，我们为容器添加了一个名为“mask”的div元素来作为遮罩层，并为其设置了绝对定位和宽度和高度为100%的百分比。同时，我们使用rgba(0, 0, 0, 0.5)设置了一个半透明的黑色背景色来让图片透出一些颜色。

最后，我们在遮罩层上添加了一段文字，并使用CSS将其位置居中对齐，并使用白色字体进行渲染。

我们还在容器的:hover伪类选择器中，使用transition属性将遮罩层的不透明度设置为0.2秒的过渡效果，并在鼠标移至容器时改变其不透明度值以显示遮罩层，从而实现了鼠标移至图片上显示遮罩层及文字的效果。

### 回答3：
鼠标移至图片上显示遮罩层及文字，可以使用CSS来实现。具体实现方式如下：

1.先在HTML中放置图片

2.使用CSS设置该图片的位置和大小，并设置其为相对定位。

3.在HTML中创建遮罩层的div，并使用CSS设置其样式和位置，将其设置为绝对定位，覆盖在图片上方。

4.为遮罩层div中添加文字，并使用CSS设置文字的样式和位置。

5.使用CSS设置当鼠标覆盖在图片上时，遮罩层和文字的样式，可以设置遮罩层的透明度为0，当鼠标覆盖在图片上时，将遮罩层的透明度设置为1。

6.最后，当鼠标移开图片时，将遮罩层的透明度设置为0。

总结：

使用CSS实现鼠标移至图片上时显示遮罩层及文字的效果，需要设置图片的样式和位置，创建遮罩层的div，并将其覆盖在图片上方。然后设置遮罩层和文字的样式，当鼠标覆盖在图片上时，将遮罩层的透明度设置为1，鼠标移开时设置为0。这样就可以实现这个效果了。