首页 > Web开发 > 详细

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

时间:2017-08-26 20:24:37      阅读:324      评论:0      收藏:0      [点我收藏+]

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>

 

效果:

技术分享

 

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

原文:http://www.cnblogs.com/qlqwjy/p/7436181.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!