跟大家講解下有關css實現背景顏色半透明的兩種方法，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css實現背景顏色半透明的兩種方法，小編也收集到了有關css實現背景顏色半透明的兩種方法的相關資料，希望大家看到了會喜歡。

在頁面布局時，為了給用戶不一樣的視覺效果，需要設置div的背景顏色為半透明狀態，你知道怎么設置嗎？

接下來，就和大家聊聊如何用兩種方式使div的背景顏色變成半透明，以及兩種方式的優劣。感興趣的朋友可以過來看看，希望對你有所幫助。

推薦手冊：css在線手冊

首先，我們用大家比較熟悉的CSS屬性opacity來改變div的背景顏色。

描述：

外面大的div背景顏色為黃色，里面小的div的背景顏色為紅色，現在我們需要設置大的div的背景顏色變成半透明狀態，我們將opacity的屬性值設為0.5，代碼如下：

HTML部分：

<div class="aa"> <div class="bb">我是內容</div></div>

CSS部分：

.aa{width: 250px;height: 250px;background: yellow;opacity: 0.5; }.bb{width: 150px;height: 150px;background: red; }

效果圖：

如圖所示，背景顏色的確變成了半透明，但是里面小div的背景以及文字都變成半透明了，這可能不是我們想要的效果，所以我們一般不使用這種方法。當然了，如果在頁面布局時，你希望div里面所有的都變透明，就用opacity。

接下來我們用另一種方法，background-color:rgba(0,0,0,0~1)，使用這個方法就只會設置div背景透明，而不會影響到div里的內容。

相關文章推薦： 1. 網頁設計中css怎么實現背景透明?(示例)2.css如何設置透明度？設置透明度的兩種方法（代碼實例） 相關視頻教程：1.CSS視頻教程-玉女心經版

HTM部分一樣，只需要將opacity換成rgba即可。

代碼如下：

.aa{width: 250px;height: 250px;background-color: rgba(255,255,0,0.5); }.bb{width: 150px;height: 150px;background: red; }

效果圖：

看圖一目了然，大的div透明度改變以后，對里面的背景和文字都沒有任何影響。所以我們一般用background-color:rgba(0,0,0,0~1)來設置背景顏色透明。

以上介紹了兩種方式改變div背景顏色的透明度，他們各有優劣，具體用什么方法，還要根據需要，找到最適合的方法，初學者可以多去練習，加深理解，希望對你有幫助。

以上就是css實現背景顏色半透明的兩種方法的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網