CSS 背景圖可以通過(guò)某些屬性進(jìn)行更改。其中,使用 opacity 屬性可以將背景圖變成透明。
background-image: url('image.jpg'); opacity: 0.5;
上述代碼將會(huì)顯示一個(gè)名為 image.jpg 的圖片,同時(shí)將其不透明度設(shè)置為 0.5。這意味著背景圖片的透明度將會(huì)降低,顯示出背景色或其他元素。
除此之外,我們也可以使用 RGBA 顏色值來(lái)設(shè)定背景顏色的透明度。RGBA 中的 A 屬性表示顏色的透明度,取值范圍在 0 到 1 之間。
background-color: rgba(255,255,255,0.5);
上述代碼將會(huì)設(shè)置一個(gè)白色的背景,并將其透明度設(shè)置為 0.5。這樣,背景色將會(huì)半透明顯示,而不會(huì)完全遮蓋底部?jī)?nèi)容。
需要注意的是,透明度屬性不僅適用于背景圖片和背景顏色,也可以應(yīng)用于元素本身。我們可以通過(guò)設(shè)置元素不透明度來(lái)控制其在頁(yè)面上的透明程度。
opacity: 0.5;
上述代碼會(huì)將元素的不透明度設(shè)置為 0.5。這樣,元素將會(huì)半透明顯示,并透出背后的內(nèi)容。
上一篇css背景圖切換卡的