html5 css3 CSS3樣式中如何讓背景漸變與背景圖片共存?
CSS3樣式中如何讓背景漸變與背景圖片共存?目前CSS3的支持越來(lái)越完善,完全可以實(shí)現(xiàn)兼容的漸變背景效果。使背景梯度與背景圖像共存的方法非常簡(jiǎn)單。主要要注意的是圖像要保持“最小單位”原則,選擇合適的瀏
CSS3樣式中如何讓背景漸變與背景圖片共存?
目前CSS3的支持越來(lái)越完善,完全可以實(shí)現(xiàn)兼容的漸變背景效果。使背景梯度與背景圖像共存的方法非常簡(jiǎn)單。主要要注意的是圖像要保持“最小單位”原則,選擇合適的瀏覽器就可以解決這個(gè)問題。這是具體的解決辦法。
1. 例如,在制作垂直顏色漸變時(shí),嘗試使用1像素的垂直圖像作為漸變背景的“最小單位”。另外需要注意的是,雖然CSS3支持多種瀏覽器的兼容性,但目前并不支持opera瀏覽器。
2. 如果兼容度允許,CSS3漸變樣式可以用于實(shí)心漸變背景,如{background:linear gradient(left top,red,blue)}。這樣,可以減少裁剪量,加快網(wǎng)頁(yè)的加載速度。但是,如果使用主流瀏覽器,則必須添加前綴。
3. 需要注意的是,對(duì)于WebKit的核心瀏覽器,比如chrome/Safari瀏覽器,要在這些瀏覽器中實(shí)現(xiàn)漸變背景,還需要使用CSS3漸變方法CSS gradient,具體來(lái)說(shuō)就是-WebKit gradient。在Firefox瀏覽器行業(yè)中,語(yǔ)言的使用略有不同。
css3如何將圖片背景透明化?
通常有三種方法來(lái)實(shí)現(xiàn)CSS的透明度(以下是透明度為80%的方法)
CSS3不透明度:x,x值從0到1,例如不透明度:0.8
CSS3 RGBA(紅、綠、藍(lán)、alpha),alpha值從0到1,例如RGBA(255255,0.8)
ie exclusive filter過濾器:Alpha(不透明度=x),X的值從0到0 100,例如過濾器:Alpha(不透明度=80)