css 点击显示遮罩层 |html div 字体居中 css样式

首先，大家需要使用 HTML 创建一个显示器和遮罩层的容器。

<div class="container">
<img src="image.jpg">
<div class="overlay"></div>
</div>

其中，大家在 div 容器中插入了图片，并添加了一个遮罩层，它用于在点击时显示。

接下来，大家使用 CSS 来控制遮罩层显示的效果。

.container {
position: relative;
width: 500px;
height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.container:hover .overlay {
display: block;
}

以上代码实现了当鼠标经过容器时，遮罩层会显示出来的效果。其中，大家使用了 :hover 选择器来控制遮罩层的显示和隐藏，当鼠标移动到容器上时，遮罩层就会显示出来。

最后，大家再来看一下完整的代码：

<div class="container">
<img src="image.jpg">
<div class="overlay"></div>
</div>
.container {
position: relative;
width: 500px;
height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.container:hover .overlay {
display: block;
}

通过这篇文章的介绍，大家可以轻松地掌握使用 CSS 实现点击显示遮罩层的方法。希望大家能够多加练习，提高自己的 CSS 技能。