CSS3可以讓我們輕松地讓背景圖片半透明,這對(duì)于網(wǎng)頁設(shè)計(jì)來說非常有用。
background-color: rgba(255,255,255,0.7);
上述代碼中,第一個(gè)255表示背景圖片的紅色分量,第二個(gè)255表示綠色分量,第三個(gè)255表示藍(lán)色分量,最后一個(gè)0.7表示透明度。透明度的值從0到1,0代表完全透明,1代表完全不透明。
此外,還可以使用CSS3的linear-gradient屬性創(chuàng)建漸變背景,從而獲得更加豐富多彩的效果:
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url(bg.jpg);
上述代碼中,linear-gradient()函數(shù)會(huì)創(chuàng)建一個(gè)從第一個(gè)顏色到第二個(gè)顏色的漸變,這里的兩個(gè)顏色都是半透明的白色,其中第一個(gè)顏色的透明度為0.7,第二個(gè)顏色的透明度為0.9。url(bg.jpg)是背景圖片的地址。
通過上述兩種方法,我們可以輕松地讓背景圖片半透明,從而實(shí)現(xiàn)更加出色的網(wǎng)頁設(shè)計(jì)效果。