設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。

語法：

background-size: auto | | | cover | contain

取值說明：

1、auto：默認值，不改變背景圖片的原始高度和寬度；

2、：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；

3、：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；

4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；

5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。

提示：大家可以在右邊的編輯窗口輸入自己的代碼嘗試不同取值的效果。

復制代碼

代碼如下:

背景圖片大小

.demo {

background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

width: 300px;

height: 140px;

border: 1px solid #999;

background-size:cover;

}

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html background缩放,background-size使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。