【半透明】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 @   QiaoZhi  阅读(999)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示