溫馨提示×

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

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

css利用transparent屬性設(shè)置透明度的方法

發(fā)布時(shí)間：2020-09-14 13:44:46 來源：億速云 閱讀：929 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css利用transparent屬性設(shè)置透明度的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

其實(shí)，css transparent是一種全透明黑色(black)的速記法，即一個(gè)類似rgba(0,0,0,0)這樣的值；是用來指定全透明色彩的。

舉個(gè)例子：

我們?cè)赾ss中定義：background:transparent，意思就代表設(shè)置背景為透明。

但，實(shí)際上background默認(rèn)的顏色就是透明的屬性，所以寫和不寫都是一樣的。那么為什么有時(shí)候需要設(shè)置background為transparent？transparent一般會(huì)使用在什么場(chǎng)景下：

當(dāng)果一個(gè)元素覆蓋在另外一個(gè)元素之上，而你想顯示下面的元素，這時(shí)你就需要把上面這個(gè)元素的background設(shè)置為transparent

transparent屬性在不同css版本下的使用：

在css1中，transparent被用來作為background-color的一個(gè)參數(shù)值，用于表示背景透明。

在css2中，border-color也開始接受transparent作為參數(shù)值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作為參數(shù)值。

在css3中，transparent被延伸到任何一個(gè)有color值的屬性上。

我們來看看兼容性：

css利用transparent屬性設(shè)置透明度的方法

#1：border-color 不接受該值；

#2：color 不接受該值；

transparent屬性繪制各種三角形（與border屬性一起使用）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.demo {
				margin: 40px auto;
				width:800px;
				/*background-color: #f0ac6b;*/
			}
			.demo *{
				float: left;
				margin: 20px 30px;
				width: 0px;
				height: 0px;
			}
			
			.t1 {
				/*background-color: #f0ac6b;*/
				border-bottom: 40px solid red;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
			
			.t2 {
				/*background-color: #f0ac6b;*/
				border-bottom: 40px solid transparent;
				border-right: 40px solid red;
				/*border-left: 20px solid transparent;*/
			}
			
			.t3 {
				border-top: 40px solid red;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
			
			.t4 {
				border-top: 40px solid transparent;
				border-left: 40px solid red;
			}
			
			.t5 {
				border-top: 40px solid red;
				border-right: 40px solid transparent;
			}
			
			.t6 {
				border-left: 40px solid transparent;
				border-bottom: 40px solid red;
			}
			
			.t7 {
				border-left: 40px solid red;
				border-bottom: 20px solid transparent;
				border-top: 20px solid transparent;
			}
			
			.t8 {
				border-right: 40px solid red;
				border-bottom: 20px solid transparent;
				border-top: 20px solid transparent;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="t1"></div>
			<div class="t3"></div>
			<div class="t2"></div>
			<div class="t4"></div>
			<div class="t5"></div>
			<div class="t6"></div>
			<div class="t7"></div>
			<div class="t8"></div>
		</div>
	</body>

</html>

效果圖：

css利用transparent屬性設(shè)置透明度的方法

以上是css利用transparent屬性設(shè)置透明度的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向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)容。

AI
助
手