遮罩层原理
利用一个全屏、半透明的div遮住页面上其它元素
<style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .mask { /* 隐藏遮罩层 */ display: none; /* 子绝父相 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url(../img/down.jpg) no-repeat center; } /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */ .tudou:hover .mask { display: block; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="../img/tudou.jpg" alt=""> </div>
使用伪元素选择器后减少了HTML界面的冗余
<style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .tudou::before { content: ''; /* 隐藏遮罩层 */ display: none; /* 子绝父相 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url(../img/down.jpg) no-repeat center; } /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */ .tudou:hover::before { display: block; } </style> </head> <body> <div class="tudou"> <img src="../img/tudou.jpg" alt=""> </div> </body>
