/*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ 

 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>

 

posted @ 2017-03-06 20:18  失落的黎明  阅读(877)  评论(0)    收藏  举报