TShopping

 找回密碼
 註冊
搜索
查看: 301|回復: 0

[分享] CSS 3背景新屬性:background-size

[複製鏈接]
發表於 2016-6-12 05:32:09 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
指定背景圖片大小
background-size:bg-size , bg-size
bg-size = auto | length | percentage | cover | contain

  • 預設值為auto,即背景圖片原始長寬。
  • length指定圖片具體大小的數值,不允許負值。
  • percentage以背景圖所在元素的百分比指定背景圖大小,不允許負值。
  • lengthpercentage可設定2數值,也可只設定1個數值,當只設定一個數值,另一個數值(高)預設值為auto,此時高度以背景圖原始寬高比例,自動縮放。
  • cover主要用於背景圖小於所在的內容,而背景圖又不適合使用repeat,此時就可以採用cover的方式,使背景圖放大至內容的大小,但此方法容易使背景圖因放大而失真
  • contain與cover正好相反,主要用於背景圖大於所在內容,但卻需要將背景圖完整呈現,此時就可採用contain的方式,使背景圖縮小至內容的大小
效果呈現為了讓呈現效果有明顯的區別,範例中的屬性預設為:
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;

範例中所使用的背景圖(100px*122px)
background-size:auto;
  1. -moz-background-size:auto;        /*for Firefox*/
  2. -webkit-background-size:auto;        /*for Google Chrome、Safari*/
  3. -o-background-size:auto;        /*for Opera*/
  4. background-size:auto;        /*for IE*/
複製代碼



1.jpg auto取自原背景圖片的尺寸不作任何的修改,所以呈現效果和沒加background-size效果是一樣的。

background-size:length

指定背景圖片寬度200px高度150px
  1. -moz-background-size:200px 150px;
  2. -webkit-background-size:200px 150px;
  3. -o-background-size:200px 150px;
  4. background-size:200px 150px;
複製代碼


雖可任意指定圖片大小,但如果數值沒取好,容易使背景圖變形失真,如同此範例。

指定背景圖片寬度200px高度auto

  1. -moz-background-size:200px;
  2. -webkit-background-size:200px;
  3. -o-background-size:200px;
  4. background-size:200px;
複製代碼


此範例和上個範例,都是設定背景圖片寬為200px,但不同點在於此範例的高度為auto,高度是配合寬度作比例的縮放,此為它的優點。

background-size:percentage

指定背景圖片寬度50%高度100%

  1. -moz-background-size:50% 100%;
  2. -webkit-background-size:50% 100%;
  3. -o-background-size:50% 100%;
  4. background-size:50% 100%;
複製代碼

背景圖可依內容元素的寬高,作百分比的縮放,同樣要注意數值的設定,避免背景圖片變形失真,如同範例。

指定背景圖片寬度50%高度auto

  1. -moz-background-size:50%;
  2. -webkit-background-size:50%;
  3. -o-background-size:50%;
  4. background-size:50%;
複製代碼



此範例和上個範例,都是設定背景圖片寬為50%,但不同點在於此範例的高度為auto,高度是配合寬度作比例的縮放,此為它的優點。

background-size:cover

  1. -moz-background-size:cover;
  2. -webkit-background-size:cover;
  3. -o-background-size:cover;
  4. background-size:cover;
複製代碼


cover使背景圖不靠repeat,占滿整個內容版面。

background-size:contain

contain主要用於背景圖大於所在內容,由於背景圖尺寸(100px*122px),所以將此範例內容元素屬性設為width:50px;height:61px;

  1. -moz-background-size:contain;
  2. -webkit-background-size:contain;
  3. -o-background-size:contain;
  4. background-size:contain;
複製代碼


contain使背景圖在尺寸大於內容元素的情況下,得以完整呈現。
CSS 3 瀏覽器支援狀況
  • Firefox(3.63+較好支援)
  • Google Chrome(5+較好支援)(P.S:Google瀏覽器自動更新,不需擔心使用到舊版)
  • Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
  • Opera(10+部分支援)
  • Safari(4+較好支援)


來源:http://www.kip.com.tw/modules/news/article.php?storyid=35

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-6 02:30 , Processed in 0.066741 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表