opacity 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*开启绝对定位*/
                position: absolute;
                /*设置偏移量*/
                top: 100px;
                left: 100px;
                
               z-index: 25;
            }
            .box3{
                position: absolute;
                z-index: 30;
                /*
                    设置元素透明属性
                    opacity可以用来设置元素背景的透明
                        需要一个0-1之间的值
                            0表示完全透明
                            1完全不透明
                */
               opacity: 0.5;
               
               filter: alpha(opacity=50);
               /*
                    在IE8及以下不支持
                        IE8及以下需要使用如下属性代替
                    filter：alpha（opacity=透明度）
                        透明度需要一个0-100之间的值
                        0 完全透明
                        100 完全不透明
                        50 半透明
                    这种方式支持IE6
               */
               
                top: 200px;
                left: 200px;
                width: 200px;
                height: 200px;
                background-color: yellowgreen
               
            }
            .box4{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                position: relative;
                /*
                    父元素层级再高也不会盖住子元素
                */
                z-index: 20;
                top: 500px;
            }
            .box5{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
                z-index: 10;
            }
        </style>
    </head>
    <body style="height: 5000px;">
        <div class="box1"></div>        
        <div class="box2"></div>                        
        <div class="box3"></div>
        <div class="box4">
            <div class="box5"></div>
        </div>
        
        
    </body>
</html>

设置元素透明属性
opacity可以用来设置元素背景的透明
　　需要一个0-1之间的值
　　　　0表示完全透明
　　　　1完全不透明

 

设置元素透明属性
opacity可以用来设置元素背景的透明
　　需要一个0-1之间的值
　　　　0表示完全透明
　　　　1完全不透明

posted @ 2021-07-06 11:59  2237774566  阅读(83)  评论(0)    收藏  举报