1 <!DOCTYPE html>
2 /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 .touch:hover .content{
9 visibility: visible;/*显示*/
10
11 }
12 .touch{
13 width: 200px;
14 height: 200px;
15 overflow: hidden;
16 position: relative;
17 }
18 .touch .content{
19 position: absolute;
20 top: 0;
21 left: 0;
22 right: 0;
23 bottom: 0;
24 color:white;
25 /*background-color: black;*/
26 /*opacity: 0.5;*/
27 background-color:rgba(0,0,0,.5);/*透明度设置的两种方式*/
28 text-align: center;
29 visibility: hidden;/* 隐藏*/
30 }
31 .touch .c1{
32 font-size: 32px;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="touch">
38 <div><img src="1.jpg"></div>
39 <div class="content">
40 <div class="c1">ALEX</div>
41 <div>500-1000(日)</div>
42 </div>
43 </div>
44 </body>
45 </html>
