### 回答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。这样就可以
实现这个
效果了。
4062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
