首頁  >  文章  >  web前端  >  css 實現背景圖片拉伸

css 實現背景圖片拉伸

高洛峰
高洛峰原創
2016-11-24 11:48:151957瀏覽

使用css3 屬性:background-size

 background-size:cover   即可實現像桌面壁紙一樣拉伸

 以下是w3c上面的解釋:

語法
tainground-sizes_w|percentage;描述  
length 設定背景影像的高度和寬度。

第一個值設定寬度,第二個值設定高度。

如果只設定一個值,則第二個值會被設定為 "auto"。
  
percentage 以父元素的百分比設定背景影像的寬度和高度。

第一個值設定寬度,第二個值設定高度。

如果只設定一個值,則第二個值會被設定為 "auto"。
  
cover 把背景影像擴展至足夠大,以使背景影像完全覆蓋背景區域。

背景影像的某些部分也許無法顯示在背景定位區域。
  
contain 將影像影像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。  


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn