Html+Css之background-size屬性

Html+Css之background-size屬性

CSS3 background-size:[length|percentage|auto]{1,2}|cover|contain

瀏覽器參照基準：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and Later, IE9.0 and Later

* 用於設置背景圖片的大小，有2個可選值，第1個值用於指定背景圖的width，第2個值用於指定背景圖的height，如果只指定1個值得，則第2個值默認為auto；

背景圖尺寸（數值表示方式）：

#background-size{ background-size:300px 100px; }

背景圖尺寸（百分比表示方式）：

#background-size2{ background-size:40% 80%; }

背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：

#background-size3{ background-size:cover; }

背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：

#background-size4{ background-size:contain; }

背景圖尺寸（以圖片自身大小來填充元素，即auto值）：

#background-size5{ background-size:auto; }