2017年1月12日 星期四

background-size : cover

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

CSS 3背景新屬性:background-size

指定背景圖片大小
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的方式,使背景圖縮小至內容的大小

沒有留言:

張貼留言