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

<!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浏览器

转载于:https://www.cnblogs.com/yingleiming/p/7810130.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页