這篇文章給大家介紹怎么在css中設(shè)置透明度，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

我們提供的服務有：網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、襄陽ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術(shù)的襄陽網(wǎng)站制作公司

在css中設(shè)置透明度的方法有三種：

• rgba()

• opacity屬性

• filter:opacity(%)

方法1：rgba()函數(shù)

rgba()函數(shù)可以設(shè)置顏色透明度，語法如下：

RGBA(R,G,B,A)

取值：

• R： 紅色值。正整數(shù) | 百分數(shù)

• G： 綠色值。正整數(shù) | 百分數(shù)

• B： 藍色值。正整數(shù) | 百分數(shù)

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

例如：rgba(255,0,0,0.5)半透明紅色

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

示例：

設(shè)置透明度的效果

.box1{
                position:relative;
            width:200px;height:200px;
           background-color: #00f;
           z-index:10;
           opacity:0.5;
    }
         .box2{
              position:absolute;
              top:80px;
              left:80px;
              width:200px;
              height:200px;
              background-color:#0f0;
              z-index:5;
              opacity:0.5;
       }
       .box3{
              position:relative;
              width:200px;
              height:200px;
             background-color:#f00;
            z-index:1;
              opacity:0.5;
}

表現(xiàn)效果：

（學習視頻分享：css視頻教程）

方法2：使用opacity屬性

在 CSS3 中，增加了一個 opacity 屬性，使用此屬性可以設(shè)置元素的透明度。opacity屬性具有繼承性，會使容器中的所有元素都具有透明度；

語法：

opacity: value ;

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

代碼實例：

	
		
		
	
	
		
			
opacity: 1;