首頁 > 開發者 > JavaScript
background-size 設定背景圖片的大小，
background-size
設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
文法：
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
1、auto：預設值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設定為前面兩個值，當設定一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
提示：大家可以在右邊的編輯視窗輸入自己的代碼嘗試不同取值的效果。
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景圖片大小</title><style type="text/css">.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;}</style> </head> <body><div class="demo"></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
