在頁面佈局時，為了給使用者不一樣的視覺效果，需要設定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中文網其他相關文章！
