HTML&CSS基础-透明度opacity与filter

　　　　　　　　　　　　HTML&CSS基础-透明度opacity与filter　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>透明度</title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
                z-index: 2;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*开启绝对定位*/
                position: absolute;
                /*设置偏移量*/                
                top: 100px;
                left: 100px;
                /*
                 *     如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级
                 * 
                 *     可以为z-index指定一个正整数的值，该值将会作为当前元素的层级，层级越高，越优先显示
                 *     
                 *  对于没有开启定位的元素不能使用z-index
                 */
                z-index: 25;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
                
                position: absolute;
                top: 200px;
                left: 200px;
                z-index: 30;
                
                /**
                 *     设置元素的透明背景
                 *     opacity可以用来设置元素背景的透明，它需要一个0-1之间的值:
                 *         0:
                 *            表示完全透明
                 *         1:
                 *             表示不透明
                 *         0.5:
                 *             表示半透明
                 */
                opacity: 0.5;
                
                /**
                 *     opacity属性在IE8及以下的浏览器中不支持
                 *     
                 *     IE8及以下的浏览器需要使用"alpha(opacity=透明度)"属性代替,其中透明度需要一个0-100之间的值:
                 *         0:
                 *             表示完全透明
                 *         100:
                 *             表示不透明
                 *        50:
                 *             表示半透明     
                 * 
                 *     这种方式也支持IE6,但是这种效果在IE Tester中无法测试
                 */
                filter: alpha(opacity=50);
            }
 
            
        </style>
        
    </head>
    <body style="height: 5000px;">
        
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
     
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

 

posted @ 2018-03-08 22:36  尹正杰  阅读(613)  评论(0)  编辑  收藏  举报