首頁 > web前端 > css教學 > rgba中的a是指什麼?rgba怎麼用

rgba中的a是指什麼?rgba怎麼用

云罗郡主
發布: 2018-11-21 17:29:30
轉載
22824 人瀏覽過

這篇文章帶給大家的內容是關於rgba中的a是指什麼?rgba怎麼用,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

RGBA顏色

RGB是一種色彩標準,是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。 RGBA說穿了,就是在RGB的基礎上加了一個透明度通道Alpha。

語法:

rgba(R,G,B,A)

#說明:

R:紅色值(Red);

G:綠色值(Green);

B:藍色值(Blue);

A:透明度(Alpha);

R、G、B三個參數可以為正整數,也可以是百分比。正整數值的值範圍為0~255,百分數值的值範圍為0.0%~100.0%。超出範圍的數值將被截至其最接近的值極限。並非所有瀏覽器都支援使用百分數值。

參數A為透明度,類似opacity屬性,取值範圍在0.0~1.0之間,不可為負值。以下是RGBA顏色的正確用法:

rgba(255,255,0,0.5)
rgba(50%,80%,50%,0.5)
登入後複製

範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 RGBA颜色</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            list-style-type:none;
            width:200px;
        }
        li
        {
            height:30px;
            line-height:30px;
            font-size:20px;
            font-weight:bold;
            text-align:center;
        }
        /*第1个li*/
        li:first-child
        {
            background-color:#FF00FF;
        }
        /*第2个li*/
        li:nth-child(2)
        {
            background-color:rgba(255,0,255,0.5);
        }
        /*第3个li*/
        li:last-child
        {
            background-color:#FF00FF;
            opacity:0.5;
        } 
    </style>
</head>
<body>
    <ul>
        <li>php中文网</li>
        <li>php中文网</li>
        <li>php中文网</li>
    </ul>
</body>
</html>
登入後複製

效果如下:

rgba中的a是指什麼?rgba怎麼用

分析:

十六進位顏色值#FF00FF等價於rgb(255,0,255)。第1個li元素沒有使用RGBA顏色值,也沒有使用透明度opacity屬性;第2個li元素使用RGBA顏色值;第3個li元素使用透明度opacity屬性。

大家可以清楚看出,假如我們對某個元素使用透明度opacity屬性,則該元素的內容以及子元素都會受到影響。

從上面的例子我們知道,對於設定元素的透明度,RGBA比透明度opacity屬性更好,因為RGBA不會影響元素中的內容以及子元素的不透明度。

以上就是對rgba中的a是指什麼?rgba怎麼用的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。


以上是rgba中的a是指什麼?rgba怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:lvyestudy.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板