中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

背景圖片/紋理有很多種使用方式，常常用于添加網(wǎng)站的最佳的最終美化�，F(xiàn)在它在CSS3中被重視，我們可以應(yīng)用多背景圖和背景圖片尺寸來實現(xiàn)更完美的效果。

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中應(yīng)用多背景圖片，我們使用都好隔開，例如：

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…)

本節(jié)原文：
http://www.zenelements.co.uk/blog/css3-background-images

特別聲明，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate fromZen Elements, thanks Alex for his great work so much.

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 陰影 下一頁 多列/多卷

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。