display、visibility显示隐藏元素，overflow溢出显示隐藏

 

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .tudo{
 8                 position: relative;
 9                 width: 444px;
10                 height: 340px;
11                 background-color: pink;
12                 margin: 30px auto;
13             }
14             .tudo img {
15                 width: 100%;
16                 height: 100%;
17             }
18             .mask {
19                 /* 隐藏遮罩 */
20                 display: none;
21                 position: absolute;
22                 top: 0;
23                 left: 0;
24                 width: 100%;
25                 height: 100%;
26                 background: rgba(0,0,0,.3) url(img/icon%20-%20副本.gif) no-repeat center;
27             }
28             .mask img{
29                 
30             }
31             .tudo:hover .mask{
32                 /* 当鼠标经过这个盒子，遮罩显示出来 */
33                 display: block;
34             }
35         </style>
36     </head>
37     <body>
38         <div class="tudo">
39             <img src="img/QQ图片20210407190338.jpg" alt="">
40             <div class="mask">
41             </div>
42         </div>
43     </body>
44 </html>

 

 

 

posted @ 2021-11-21 18:10  小闫的姑娘  阅读(24)  评论(0)  编辑  收藏  举报