yanyanmammy

如何用CSS实现背景半透明效果?做过活动页面的可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。

不过如果你只需求在IE下实现,使用CSS实现透明度有很多方案,这里只是介绍大家通用的方法:

1.  .transparent_class {

2.        filter:alpha(opacity=50);//标准的css透明度,在大部分的标准浏览器Firefox, Safari, and Opera都有效

3.        opacity:0.5;//兼容IE解决方案

4.        -moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.几乎没有可以不需要

5.        -khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用  

6.  }


知道了CSS改变透明度的原理,那么使用javascript动态改变透明度就简单了:

1.  <html>

2.      <head>

3.          <title></title>

4.          <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

5.          <style>

6.              div{width:100px;height:100px;background-color:red}

7.          </style>

8.          <script>

9.              window.onload =function(){

10.                var myDiv = document.getElementById("transparent_div");

11.                myDiv.onclick =function(){

12.                    myDiv.style.opacity =".4";//针对所有通用浏览器

13.                    myDiv.style.filter ="alpha(opacity=40)";//针对IE浏览器

14.                }

15.            }

16.        </script>

17.    </head>

18.    <body>

19.        <divid="transparent_div">this istransparent div</div>

20.    </body>

21.</html>


jQuery改变透明度实现如下:

1.  $("#transparent_div").css({ opacity:.4});


使用jQuery还可以轻松实现动画效果:

1.  $("#transparent_div").click(function(){

2.       $("#transparent_div").animate({ 

3.           opacity:.4 

4.           },1000,function(){

5.               alert("动画完成");

6.       }); 

7.   });

来源:http://front.anyforweb.com/newsDetail69.shtml

 

用JQuery改变图片的透明度

下面的例子展示了你如何改变项目的透明度。当鼠标滑过<img>标签时,用hover()函数设置透明度样式。

 

 

Html代码 
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
    5.     <script text="text/javascript">  
    6.         const OUT_OPACITY = 0.4;  
    7.         const OVER_OPACITY = 1.0;  
    8.         $(function() {  
    9.             $("div#miniGallery img").css("opacity", OUT_OPACITY)  
    10.                 .hover(  
    11.                     function () {  
    12.                         $(this).animate({opacity:OVER_OPACITY});  
    13.                     },  
    14.                     function () {  
    15.                         $(this).animate({opacity:OUT_OPACITY});  
    16.                     }  
    17.                 );  
    18.             });  
    19.     </script>  
    20. </head>  
    21. <body>   
    22.     <div id="miniGallery">  
    23.         <img src="http://helpexamples.com/flash/images/image1.jpg" width="150" />  
    24.         <img src="http://helpexamples.com/flash/images/image2.jpg" width="150" />  
    25.         <img src="http://helpexamples.com/flash/images/image3.jpg" width="150" />  
    26.     </div>   
    27. </body>  
    28. </html

分类:

技术点:

相关文章: