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