Hey,吃完饭多陪陪家人吧!

用css为图片添加透明层

   

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>
  17. </body>
  18. </html>

css代码:

  1. .photo1{  
  2.     width630px;  
  3.     height288px;  
  4.     margin10px;  
  5.     margin-top1px;  
  6. }  
  7. .photo1 img{  
  8.     positionrelative;  
  9.     z-index: 0;  
  10.     height288px;  
  11.     width630px;  
  12. }  
  13. .photo2{  
  14.     width630px;  
  15.     height288px;  
  16.     margin10px;  
  17. }  
  18. .photo2 img{  
  19.     positionrelative;  
  20.     z-index: 0;  
  21.     height288px;  
  22.     width630px;  
  23.     bottombottom288px;  
  24. }  
  25. /*左边透明层*/  
  26. #p_left{  
  27.     background-color#6ff331;  
  28.     floatleft;  
  29.     width191px;  
  30.     height288px;  
  31.     positionrelative;  
  32.     z-index: 1;  
  33. }  
  34. /*右边透明层*/  
  35. #p_right{  
  36.     background-color#987668;  
  37.     floatrightright;  
  38.     width191px;  
  39.     height288px;  
  40.     positionrelative;  
  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
 
 
发表评论