彻底搞清楚rgba与opacity/filter的区别

最新推荐文章于 2024-09-29 22:23:11 发布

蓝色清晨_

最新推荐文章于 2024-09-29 22:23:11 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 笔记

本文链接：https://blog.youkuaiyun.com/yingleiming/article/details/80004243

CSS 笔记专栏收录该内容

16 篇文章

订阅专栏

本文通过实例对比了rgba颜色模式与opacity属性及filter属性在实现半透明效果上的差异，特别是对于子元素的影响。详细介绍了如何使用这些方法来创建背景半透明效果，并提供了兼容不同浏览器版本的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rgba与opacity/filter的区别</title>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration: none;}
        ul li{list-style: none;}
        #nav{
         width: 960px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(13,83,188,0.8);
            margin:0 auto;
        }
        #nav ul li{
            float: left;
            width: 19.91%;
            text-align: center;
        }
        #nav ul li:nth-child(even){
            border-left:1px solid #fff;
            border-right:1px solid #fff;
        }
        #nav ul li a{
            font-size: 14px;
            color: #FFFFFF;
        }

        #nav ul li:hover{
            cursor: pointer;
            background-color: lightgray;
        }
        #nav ul li:hover a{
            color:rgb(13,83,188);
        }
        #imgList{
            width: 200px;
            margin:100px auto;
            height: 200px;
            border:1px solid #000000;
            background:url("../images/big-4.jpg") no-repeat 100% 100%;
            position: relative;
        }
        #imgList>div{
            position: absolute;
            top:25px;
            left: 25px;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            /*文字不会跟随父元素变得半透明*/
            /*background:rgba(0,0,0,0.5);*/

            /*文字跟随父元素变得半透明*/
            background:rgb(0,0,0);
            opacity:0.5;
            filter: "alpha(opacity=60)"; /*兼容 IE 8 */
            filter: alpha(opacity=60);   /*兼容 IE 4-7 */
        }

        #imgList>div>span{
            font-size: 24px;
            color: #fff;
        }
    </style>
</head>
<body>
<div>

</div>
    <nav id="nav">
        <ul>
            <li><a href="#">PRODUCTS</a></li>
            <li><a href="#">BRANDS</a></li>
            <li><a href="#">OUR SERVICE</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
<div bgcolor="#336699">
<div id="imgList">
    <div>
        <span>Colors</span>
    </div>
</div>
    <h4>说明:background:rgba(0,0,0,0.5);子元素不会跟随父元素变得半透明，不需和opacity、filter配合使用</h4>
    <h4>说明:background:rgb(0,0,0);opacity:0.5;子元素会跟随父元素变得半透明，彼此需要配合使用，并且要使用filter来兼容低版本IE浏览器</h4>
</div>
</body>
</html>

说明:background:rgba(0,0,0,0.5);子元素不会跟随父元素变得半透明，不需和opacity、filter配合使用
说明:background:rgb(0,0,0);opacity:0.5;子元素会跟随父元素变得半透明，彼此需要配合使用，并且要使用filter来兼容低版本IE浏览器