首頁 >web前端 >css教學 >CSS3教學(5):網頁背景圖片_css3_CSS_網頁製作

CSS3教學(5):網頁背景圖片_css3_CSS_網頁製作

黄舟
黄舟原創
2016-12-23 16:01:542084瀏覽

網頁製作Webjx文章簡介:背景圖片/紋理有很多種使用方式,常用於添加網站的最佳的最終美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 背景圖片/紋理有很多種使用方式,常常用於添加網


背景圖片/紋理有很多種使用方式,常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 
背景圖片/紋理有很多種使用方式,常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。
上一篇文章:CSS3教學(4):網頁邊框與網頁文字陰影 
CSS3的背景圖片大小可以寫成background-size:Apx Bpx;
-Apx = x軸(圖片寬度)
-Bpx = y軸(圖片高度) 
了解了這些,我們開始體驗這個功能吧:
最好支援CSS3背景大小的瀏覽器是Safari和Opera,所以我們只需要使用-o和-webkit前綴。 背景大小 

CSS3教學(5):網頁背景圖片_css3_CSS_網頁製作

#backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 5bottom right no-repeat; -o-background-size: 150px 550 ; padding: 15px 25px; height: inherit; width: 590px; } 
瀏覽器支援:

Firefox(3.05 …)

Google Chrome(1.0.154 Internet; Explorer(IE7, IE8 RC1 )

Opera(9.6 …)

Safari(3.2.1 windows…) 

為了在CSS3中應用多背景圖片,我們使用都好隔開,例如: 

為了在CSS3中應用多背景圖片,我們使用都好隔開,例如: 

_1. extention) top right no-repeat, url(image_2.extention) bottom right no-repeat; 



#backgroundMultiple{ border: 5px solid #9e9aab; urldigion, nex. (image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px; } CSS3教學(5):網頁背景圖片_css3_CSS_網頁製作瀏覽器支援

瀏覽器

Google CSS3教學(5):網頁背景圖片_css3_CSS_網頁製作的內容,更多相關內容請關注PHP中文網(www.php.cn)!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn