需求
当点击图片时,显示遮罩层和文字,类似下图这样。图标是可以点击的链接。并实现垂直居中对齐。
我看了网上许多教程是把遮罩层放在a标签里,或者只能显示文字,没办法放链接。
只需要使用z-index 控制它们的显示顺序就好了。当鼠标移入图片时,显示遮罩层和内容。内容的z-index 值必须要大于 遮罩层,这样它才能在上面显示。
显示出来了还没完,还有绝对定位元素的垂直居中显示。
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击图片显示遮罩和文字</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
width: 300px;
height: 300px;
margin