结合隐藏元素和定位的知识后，完成仿土豆显示隐藏遮盖案例
其中要注意的点：
1.子绝父相
2.新学到的知识点 ：背景颜色与背景图片可以同时使用
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .tudou { position: relative; margin: 100px auto; width: 400px; height: 300px; } .mask { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } .tudou:hover .mask { display: block; } img { width: 100%; height: 100%; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="images/toudou.jpg" alt=""> </div> </body> </html>
原文：https://www.cnblogs.com/731856167qqcom/p/11910177.html