溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css如何寫透明度

發(fā)布時(shí)間：2022-02-24 10:33:39 來源：億速云 閱讀：148 作者：小新 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)css如何寫透明度，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在css中如果我們要設(shè)置透明度的話，我們可以使用opacity屬性和rgba（）來設(shè)置。而且在使用中我們要知道opacity是使用來設(shè)置透明程度的，對(duì)于rgba（）的話則是用來對(duì)顏色設(shè)置透明度的。那么我們先來了解一下opacity與rgba（）。

1.opacity屬性

當(dāng)我們?cè)谑褂眠@個(gè)屬性的時(shí)候我們可以設(shè)置的透明度值的范圍在0.0至1.0之間，對(duì)應(yīng)的值越小說明透明度越大，反之則透明度越小。

語(yǔ)法：

opacity: value|inherit;

在語(yǔ)法中的value是指不透明度的值。而inherit則是表示opacity屬性的值應(yīng)該從父元素繼承。

2.rgba（）

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上擴(kuò)展包括了 “alpha” 通道，而且還可以對(duì)顏色設(shè)置透明度。

語(yǔ)法：

rgba（R,G,B,A）;

對(duì)rgba() 里的值的介紹：R：紅色值。正整數(shù) （0~255）G：綠色值。正整數(shù) （0~255）B：藍(lán)色值。正整數(shù)（0~255）A：透明度（取值0~1之間）。

3.案例

(1)、設(shè)置文本透明

我們通過將文本設(shè)為透明來觀察其內(nèi)容，代碼如下：

<!DOCTYPE html>  
<html>  
    <head>  
    	<meta charset="UTF-8">
        <title>Opacity屬性文本案例</title>  
        <style>  
            .demo {  
                background: #009991;  
                padding: 15px;  
                text-align:center;  
                width:300px;  
            }        
            #rgba {  
                padding: 15px;  
                text-align:center;  
                width:300px;  
            }  
            .rgba1 {  
                background: rgba(0, 153, 145, 0.1);  
            }               
            .rgba2 {  
                background: rgba(0, 153, 145, 0.5);  
            }               
            .rgba3 {  
                background: rgba(0, 153, 145, 0.8);  
            }  
            .rgba4 {  
                background: rgba(0, 153, 145, 1.0);  
            }  
            .g1 {  
                float:left;  
                margin-left:50px;  
            }  
            .g2 {  
                margin-top:-40px;  
                margin-left:50px;  
                float:left;  
            }  
        </style>  
    </head>  
    <body>  
        <div class ="g1">  
            <p style = "font-size:24px;font-weight:bold;">透明盒子</p>  
            <div class = "demo" ><p>10% 不透明度</p></div>  
            <div class = "demo" ><p>50% 不透明度</p></div>  
            <div class = "demo" ><p>80% 不透明度</p></div>  
            <div class = "demo"><p>100% 不透明度</p></div></div><br><br>                
        <div class = "g2">  
            <p style = "font-size:24px;font-weight:bold;">rgba顏色值</p>  
            <div class="rgba1" id = "rgba"><p>10% 不透明度</p></div>  
            <div class="rgba2" id = "rgba"><p>50% 不透明度</p></div>  
            <div class="rgba3" id = "rgba"><p>80% 不透明度</p></div>  
            <div class="rgba4" id = "rgba"><p>100% 不透明度</p></div> 
        </div>  
    </body>  
</html>[object Object]

在結(jié)果中我們看到根據(jù)不同的opacity中的vue值會(huì)呈現(xiàn)不同的透明度。

(2)、圖片透明設(shè)置代碼如下：

<!DOCTYPE >  
<html>  
    <head>  
        <title>Opacity屬性圖片案例</title>  
        <style> 
            .forest {
            	width: 110px;
                opacity: 0.5;  
            }  
	     .forest-one{
		width:110px;			    
			}  
            .opacity {                               
                text-align:center;  
		float: left;
            }  .opacity-one {  
               margin-left: 20px;
                text-align:center;  
		float: left;
            }  
            body { 
                background:gainsboro no-repeat; 
                background-size:cover; 
            } 
        </style>  
    </head>  
    <body>  
        <div class = "opacity"> 
		<p>設(shè)有透明度圖</p>
            <img class = "forest" src = "img/row.png">  
         </div> 
		<div class = "opacity-one">
			<p>原圖</p>
			<img src="img/row.png" class = "forest-one">
		</div>
    </body>  
</html>

關(guān)于“css如何寫透明度”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手