CSS中背景圖透明是網(wǎng)頁設(shè)計中常用的一種效果,可以讓背景圖融入到網(wǎng)頁中,配合其他元素使用,從而達(dá)到美觀的效果。
.transparent-bg { background: url("bg-img.jpg") no-repeat fixed center center / cover; opacity: 0.5; }
以上代碼是設(shè)置背景圖為透明效果的示例,首先設(shè)置背景圖的路徑,然后使用opacity屬性來設(shè)置透明度,0為完全透明,1為不透明。
如果想要讓背景圖在鼠標(biāo)移入時變得完全不透明,可以使用以下代碼:
.transparent-bg:hover { opacity: 1; }
以上代碼中,使用:hover選擇器來選擇背景圖,當(dāng)鼠標(biāo)移入時,使用opacity屬性將背景圖的透明度設(shè)為1,即完全不透明。
總的來說,使用CSS讓背景圖變得透明是一個簡單而實用的技巧,可以讓網(wǎng)頁設(shè)計更加多樣化,同時也可以提高網(wǎng)頁的美觀度。