Hi~上午好！

用css为图片添加透明层

发布于2016-4-7 分类：CSS / 前端 评论(0) 阅读(25,597)
　　　

IFE_106

 

在百度IFE春季班的任务一的第6题里面需要为一张图片添加透明层，开始不知道怎么做，百度看别人实现透明层的代码后觉得这个比较好用，便记下来。

效果页面：http://www.risingsun.cc/demo/cssdemo/photos_hyaline/

html代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>IFE_106</title>
  6.     <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.         <div class="photo1">
  10.             <img src="top.jpg" alt="top_photo"  >
  11.         </div>
  12.         <div class="photo2">
  13.             <div id="p_left" class="alpha_div"></div>
  14.             <div id="p_right" class="alpha_div"></div>
  15.             <img src="top.jpg" alt="top_photo"  >
  16.         </div>
  18. </body>
  19. </html>

css代码：

  1. .photo1{  
  2.     width: 630px;  
  3.     height: 288px;  
  4.     margin: 10px;  
  5.     margin-top: 1px;  
  6. }  
  7. .photo1 img{  
  8.     position: relative;  
  9.     z-index: 0;  
  10.     height: 288px;  
  11.     width: 630px;  
  12. }  
  13. .photo2{  
  14.     width: 630px;  
  15.     height: 288px;  
  16.     margin: 10px;  
  17. }  
  18. .photo2 img{  
  19.     position: relative;  
  20.     z-index: 0;  
  21.     height: 288px;  
  22.     width: 630px;  
  23.     bottombottom: 288px;  
  24. }  
  25. /*左边透明层*/  
  26. #p_left{  
  27.     background-color: #6ff331;  
  28.     float: left;  
  29.     width: 191px;  
  30.     height: 288px;  
  31.     position: relative;  
  32.     z-index: 1;  
  33. }  
  34. /*右边透明层*/  
  35. #p_right{  
  36.     background-color: #987668;  
  37.     float: rightright;  
  38.     width: 191px;  
  39.     height: 288px;  
  40.     position: relative;  
  41.     z-index: 1;  
  42. }  
  43. .alpha_div{  
  44.     opacity:0.25;  /*不透明度*/  
  45.     filter:alpha(opacity=25);  /*IE8 以及更早的版本使用*/  
  46. }  

 

 

 

 

未经允许不得转载：Rising Sun's Blog » CSS / 前端 » 用css为图片添加透明层
标签：
评论 0
 
 
发表评论