CSS 3靠山新屬性：background-size
網站架設
contain使背景圖在尺寸大於內容元素的環境下，得以完全顯現。 |
background-size：auto;
|
- -moz-background-size:50%;
- -webkit-background-size:50%;
- -o-background-size:50%;
- background-size:50%;
複製代碼
- -moz-background-size:200px;
- -webkit-background-size:200px;
- -o-background-size:200px;
- background-size:200px;
複製代碼
效果出現為了讓顯現結果有明顯的區分，典範榜樣中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
濫觞：http://www.kip.com.tw/modules/news/article.php?storyid=35
- -moz-background-size:cover;
- -webkit-background-size:cover;
- -o-background-size:cover;
- background-size:cover;
複製代碼
background-size：contain
contain主要用於佈景圖大於地點內容，由於靠山圖尺寸(100px*122px)，所以將此範例內容元素屬性設為width:50px;height:61px;
指定佈景圖片巨細
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain
- 預設值為auto，即後臺圖片原始長寬。
- length指定圖片具體大小的數值，不許可負值。
- percentage以背景圖地點元素的百分比指定靠山圖巨細，不許可負值。
- length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另一個數值(高)預設值為auto，此時高度以背景圖原始寬高比例，自動縮放。
- cover主要用於背景圖小於地點的內容，而背景圖又不合適使用repeat，此時就能夠採用cover的體例，使佈景圖放大至內容的巨細，但此方法輕易使後臺圖因放大而失真。
- contain與cover正好相反，首要用於後臺圖大於地點內容，但卻需要將靠山圖完全顯現，此時便可採用contain的體式格局，使靠山圖縮小至內容的巨細。
background-size：cover
指定後臺圖片寬度50%高度auto
- -moz-background-size:50% 100%;
- -webkit-background-size:50% 100%;
- -o-background-size:50% 100%;
- background-size:50% 100%;
複製代碼
 |
此類型和上個典範榜樣，都是設定配景圖片寬為200px，但分歧點在於此範例的高度為auto，高度是配合寬度作比例的縮放，此為它的優點。 |
 |
cover使靠山圖不靠repeat，占滿整個內容版面。 |
 |
規範中所利用的靠山圖(100px*122px) |
- -moz-background-size:contain;
- -webkit-background-size:contain;
- -o-background-size:contain;
- background-size:contain;
複製代碼
指定佈景圖片寬度200px高度auto
 |
雖可隨便指定圖片巨細，但若是數值沒取好，輕易使後臺圖變形失真，猶如此典範榜樣。 |
background-size：length
指定靠山圖片寬度200px高度150px background-size：percentage
指定配景圖片寬度50%高度100%
CSS 3 瀏覽器支援狀態
- Firefox(3.63+較好支援)
- Google Chrome(5+較好支援)(P.S：Google瀏覽器主動更新，不需擔心利用到舊版)
- Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
- Opera(10+部分支援)
- Safari(4+較好支援)
 |
靠山圖可依內容元素的寬高，作百分比的縮放，一樣要注意數值的設定，避免後臺圖片變形失真，如同典範。 |
- -moz-background-size:auto; /*for Firefox*/
- -webkit-background-size:auto; /*for Google Chrome、Safari*/
- -o-background-size:auto; /*for Opera*/
- background-size:auto; /*for IE*/
複製代碼
 |
 auto取自原後臺圖片的尺寸不作任何的修改，所以出現結果和沒加background-size結果是一樣的。 |
- -moz-background-size:200px 150px;
- -webkit-background-size:200px 150px;
- -o-background-size:200px 150px;
- background-size:200px 150px;
複製代碼
 |
此規範和上個典範榜樣，都是設定配景圖片寬為50%，但不同點在於此典範的高度為auto，高度是配合寬度作比例的縮放，此為它的長處。 |
本文出自:
|