css中怎樣設(shè)置透明度

這篇文章主要介紹了css中怎樣設(shè)置透明度，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站開發(fā)、展示型做網(wǎng)站、網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷推廣問題。

css設(shè)置透明度的方法：1、使用rgba()設(shè)置顏色透明度，語(yǔ)法“background:rgba(R,G,B,A)”；2、使用opacity屬性設(shè)置背景透明度，語(yǔ)法“opacity: 透明值;”，取值范圍“0.0~1.0”。

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

語(yǔ)法：

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è)面的布局中有很多應(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>
        <p class="demo">
            <p class="demo1">背景色不透明，文字不透明！</p>
            <p class="demo2">背景色半透明，文字不透明！</p>
        </p>
    </body>
    </html>

效果圖：

css中怎樣設(shè)置透明度

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

css中怎樣設(shè)置透明度

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

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

語(yǔ)法：

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>
        <p class="demo">
            <p class="demo1">
                <p>背景色不透明，文字不透明！</p>
            </p>
            <p class="demo2">
                <p>背景色透明，文字也透明！</p>
            </p>
        </p>
    </body></html>

效果圖：

css中怎樣設(shè)置透明度
opacity:0.5;使得demo2容器的所以元素都呈現(xiàn)半透明。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css中怎樣設(shè)置透明度”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：css中怎樣設(shè)置透明度
文章網(wǎng)址：http://chinadenli.net/article6/jegdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、網(wǎng)站制作、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css中怎樣設(shè)置透明度