這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹css怎么將背景顏色設(shè)置成半透明，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司是一家專注于做網(wǎng)站、網(wǎng)站制作與策劃設(shè)計(jì),康樂網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:康樂等地區(qū)?？禈纷鼍W(wǎng)站價(jià)格咨詢:18982081108

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

描述：

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

HTML部分：

    
我是內(nèi)容

CSS部分：

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

效果圖：

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

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

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

代碼如下：

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

效果圖：

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

關(guān)于css將背景顏色設(shè)置成半透明的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。