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

下面分別是css中 兩種方法實現的背景顏色透明實例   

1，通過background和opacity設置背景顏色透明

background屬性中屬性值比較簡單，所以我們簡單看看opacity屬性

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

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

<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設置背景透明度，但是上面有文字的話，文字也會變成透明，就下面效果。

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

2，通過rgba方式設置背景色透明

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

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

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

<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方式設置背景顏色透明度效果前后對比如下：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。