首页 > 代码库 > /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/
/*透明度设置的两种方式,以及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>
/*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。