溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹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里的內容。
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)來設置背景顏色透明。
關于css將背景顏色設置成半透明的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
