【半透明】DIV半透明层 CSS来实现网页背景半透明

DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。

设置DIV半透明CSS代码：

    div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}

 

说明：
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认
2、-moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%
3、opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明

 

一、    未设置半透明样式实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>没有半透明效果</title>
    </head>
    <body    style="background-image: url(../1视差滚动/images/bg1.png);">
        <div id="" style="width: 700px;height:600px;background-color: black;">
            没有半透明效果
        </div>
    </body>
</html>

 

 

效果:

 

 

二、  设置半透明效果:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>有半透明效果</title>
    </head>

    <body style="background-image: url(../1视差滚动/images/bg1.png);">
        <div id="" style="width: 700px;height:600px;background-color: black;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;color:red ">
            有半透明效果
        </div>
    </body>

</html>

 

效果:

 

posted @ 2017-08-26 19:26  QiaoZhi  阅读(974)  评论(0)  编辑  收藏  举报