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

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

背景圖片/紋理有很多種使用方式，常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。
背景圖片/紋理有很多種使用方式，常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。
上一篇文章：CSS3教程(4):網頁邊框和網頁文字陰影
CSS3的背景圖片大小可以寫成 background-size:Apx Bpx;
-Apx = x軸(圖片寬度)
-Bpx = y軸(圖片高度)
瞭解了這些，我們開始體驗這個特性吧：
最好支援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; }
瀏覽器支援：

Firefox(3.05 …)

Google Chrome(1.0.154 …)

Google Chrome(2.0.156 …)

Internet Explorer(IE7, IE8 RC1 )

Opera(9.6 …)

Safari(3.2.1 windows…)
為了在CSS3中應用多背景圖片，我們使用都好隔開，例如：
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

#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; }
瀏覽器支援：

Firefox(3.05 …)

Google Chrome(1.0.154 …)

Google Chrome(2.0.156 …)

Internet Explorer(IE7, IE8 RC1 )

Opera(9.6 …)

Safari(3.2.1 windows…)

以上就是CSS3教程(5):網頁背景圖片_css3_CSS_網頁製作的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

