CSS(十)——透明度的两种方法

2019-12-02 209 阅读1分钟

方法一：利用opacity：0 ~ 1

  <style>
        div{
            height: 200px;
            width: 200px;
            margin: 200px auto;
            background: black;
            opacity: 0.4;
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果如下

方法二：利用rgba(255,255,255,0.4)

 <style>
        div{
            height: 200px;
            width: 200px;
            margin: 200px auto;
            /* background: black;
            opacity: 0.4; */
            background: rgba(0, 0, 0,0.4);
        }
    </style>

效果同上

opacity 与 rgba的区别：

opacity 不光是背景，还有该元素内的文字也会改变透明度
rgba 仅改变背景透明度

 <style>
    #first{
        height: 200px;
        width: 200px;
        background:pink;
        opacity: 0.4;
    }
    #second{
        height: 200px;
        width: 200px;
        background: rgba(255, 255, 0,0.5);
    }
    </style>
</head>
<body>
    <div id = "first">哈哈哈哈哈哈</div>
    <div id = "second">玉莹莹莹莹莹莹</div>
</body>

效果如下