網(wǎng)站建設(shè)中css實(shí)現(xiàn)背景顏色半透明的兩種方法發(fā)布者：本站     時(shí)間：2022-05-30 15:05:45

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

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

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

描述：

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

HTML部分：

1
2
3
<divclass="aa">
    <divclass="bb"我是內(nèi)容</div>
</div>
CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
.aa{
 
    width: 250px;
    height: 250px; 
    background: yellow;             
    opacity: 0.5;
    }
 
.bb{ 
    width: 150px; 
    height: 150px; 
    background: red;
    }
效果圖：



如圖所示，背景顏色的確變成了半透明，但是里面小div的背景以及文字都變成半透明了，這可能不是我們想要的效果，所以我們一般不使用這種方法。當(dāng)然了，如果在頁面布局時(shí)，你希望div里面所有的都變透明，就用opacity。
接下來我們用另一種方法，background-color:rgba(0,0,0,0~1)，使用這個(gè)方法就只會(huì)設(shè)置div背景透明，而不會(huì)影響到div里的內(nèi)容。
HTM部分一樣，只需要將opacity換成rgba即可。

代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
.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)來設(shè)置背景顏色透明。

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