設(shè)置CSS透明度的方法

更新時(shí)間：2021-07-02 16:03:18 來源：動(dòng)力節(jié)點(diǎn) 瀏覽1159次

一、css rgba()設(shè)置顏色透明度

語法：

rgba（R,G,B,A）;

RGBA是代表Red（紅色）Green（綠色）Blue（藍(lán)色）和Alpha（不透明度）三個(gè)單詞的縮寫。RGBA顏色值是RGB顏色值的擴(kuò)展，帶有一個(gè)alpha通道-它規(guī)定了對(duì)象的不透明度。

rgba（)里的值的介紹：

R：紅色值。正整數(shù)（0~255）

G：綠色值。正整數(shù)（0~255）

B：藍(lán)色值。正整數(shù)（0~255）

A：透明度。取值0~1之間

rgba()只是單純的可以設(shè)置顏色透明度，這樣在頁面的布局中有很多應(yīng)用。比如說：讓背景出現(xiàn)透明效果，但上面的文字不透明。

代碼實(shí)例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rgba()</title>
        <style>
            .demo{
                width: 350px;
                height: 300px;
                margin: 50px auto;
            }
            .demo *{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
            }
            .demo1{
                background:rgba(255,0,0,1);
            }
            .demo2{
               background:rgba(255,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="demo1">背景色不透明，文字不透明！</div>
            <div class="demo2">背景色半透明，文字不透明！</div>
        </div>
    </body>
</html>

效果圖：

css透明度

上例中，設(shè)置的顏色值是一樣的，只是透明度不同。這樣看不出來有除了顏色之外的不同，我們?cè)诟溉萜鱠emo上也設(shè)置一個(gè)背景色，這樣的效果圖：

css透明度

這樣就可以看出：第一個(gè)盒子（demo1）沒有設(shè)置透明度，紅色完全把下面盒子（demo）的顏色給覆蓋住了；第二個(gè)盒子（demo2）設(shè)置了透明度，使得顏色半透明，沒有把下面盒子（demo）的顏色給完全覆蓋，而是混合顯示了。

二、css opacity屬性設(shè)置背景透明度

語法：

opacity: value ;

value：指定不透明度，從0.0（完全透明）到1.0（完全不透明）。

opacity屬性具有繼承性，會(huì)使容器中的所有元素都具有透明度；

代碼實(shí)例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>opacity屬性</title>
        <style>
            .demo{
                width: 280px;
                height: 140px;
                margin: 50px auto;
            }
            .demo1,.demo2{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
                background:#2DC4CB;
            }
            .demo1{
                opacity:1;
            }
            .demo2{
                opacity:0.5;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="demo1">
                <p>背景色不透明，文字不透明！</p>
            </div>
            <div class="demo2">
                <p>背景色透明，文字也透明！</p>
            </div>
        </div>
    </body>
</html>

效果圖：

css透明度

opacity:0.5;使得demo2容器的所以元素都呈現(xiàn)半透明。

總結(jié)：rgba()方法與opacity方法雖然都可以實(shí)現(xiàn)透明度效果，但rgba()只作用于元素的顏色或其背景色（設(shè)置了rgb(）透明度元素的子元素不會(huì)繼承其透明效果）；而opacity具有繼承性，既作用于元素本身，也會(huì)使元素內(nèi)的所有子元素具有透明度。

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"設(shè)置CSS透明度的方法"，希望對(duì)大家有幫助，想了解更多可查看CSS視頻教程，如有疑問，請(qǐng)?jiān)诰€咨詢，有專業(yè)老師隨時(shí)為您服務(wù)。

CSS教程