在css中設(shè)置背景顏色透明的方法有兩種： 一種是通過rgba方法設(shè)置，另一種是通過backgroundh和opacity設(shè)置

下面分別是css中 兩種方法實(shí)現(xiàn)的背景顏色透明實(shí)例   

1，通過background和opacity設(shè)置背景顏色透明

background屬性中屬性值比較簡(jiǎn)單，所以我們簡(jiǎn)單看看opacity屬性

opacity屬性參數(shù)的“不透明度”是以數(shù)字表示，從0.0至1.0都可以，完全透明是0.0，完全不透明是1.0，換句話說，數(shù)字越大越不透明。參數(shù)除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

通過backgroud和opacity設(shè)置背景顏色透明度的具體實(shí)例    代碼如下：

<p style="width: 200px;height: 200px;Object-fit : contain">
	    <p class="06ef-859e-dfa5-a299 pp" >哈哈哈哈哈哈</p>
		<img src="../images/d.png"/>
</p>

        .pp{
				width: 200px;
				position: absolute;
				color: white;
				font-size: 18px;
				background-color: #550000;
				/* opacity: 0.2; */
			}

這是未添加opacity屬性：

這里是通過background和opacity設(shè)置背景透明度，但是上面有文字的話，文字也會(huì)變成透明，就下面效果。

所以，看個(gè)人需求使用哪種方法才是自己想要的效果。

2，通過rgba方式設(shè)置背景色透明

所謂rgba顏色，就是rgba三原色加alpha。在給背景添加顏色的同時(shí)，提供透明度特性。

用法：background:rgba(R,G, B, A);

下面我們就來看通過rgba方式設(shè)置背景顏色透明度的具體實(shí)例：

<p style="width: 200px;height: 200px;Object-fit : contain">
		<p class="1a56-9300-34f1-ed1e pp" >哈哈哈哈哈哈</p>
		<img src="../images/d.png"/>
</p>

            .pp{
				width: 200px;
				position: absolute;
				color: white;
				font-size: 18px;
				background-color: rgb(85 0 0 / 46%);
				/* background-color: #550000; */
			}

rgba方式設(shè)置背景顏色透明度效果前后對(duì)比如下：

 說明：通過rgba方式設(shè)置背景顏色透明度，可以設(shè)置背景顏色透明而文字不透明，但是這種方法的兼容性不好，不兼容ie瀏覽器。

到此這篇關(guān)于CSS設(shè)置背景顏色透明的兩種方法的文章就介紹到這了,更多相關(guān)css背景顏色透明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的CSS设置背景颜色透明的两种方法实例详解(css设置背景颜色为什么不显示)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。