码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-26 20:41:34      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:ota   task   g++   halo   rhev   sch   oct   jxl   avro   

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来实现网页背景半透明

标签:ota   task   g++   halo   rhev   sch   oct   jxl   avro   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!