背景圖片/紋理有很多種使用方式,常常用于添加網(wǎng)站的最佳的最終美化。現(xiàn)在它在CSS3中被重視,我們可以應(yīng)用多背景圖和背景圖片尺寸來實(shí)現(xiàn)更完美的效果。
CSS3的背景圖片大小可以寫成 background-size:Apx Bpx;
-Apx = x軸(圖片寬度)
-Bpx = y軸(圖片高度)
了解了這些,我們開始體驗(yàn)這個(gè)特性吧:
最好支持CSS3背景大小的瀏覽器是Safari和Opera,所以我們只需要使用-o和-webkit前綴。
背景大小
#backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 250px; -webkit-background-size: 150px 250px; padding: 15px 25px; height: inherit; width: 590px; }
為了在CSS3中應(yīng)用多背景圖片,我們使用都好隔開,例如:
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
我們可以在一行代碼中嘗試放置多個(gè)不同的圖片…
多背景圖
#backgroundMultiple{ border: 5px solid #9e9aab; background:url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px; }
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。