為什么background-size:100% 100%;和background-size:100%;的效果不一樣？

.demo {

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

? ? width: 300px;

? ? height: 140px;

? ? border: 1px solid #999;

? ? background-size:100% 100%;

}

標標喲

2017-01-26

源自：十天精通CSS3 5-3

關注問題我要回答

15254

操作

收起

3 回答

qq_北方有佳人_0 回答被采納 +3 積分
2017-01-27

background-size:這個屬性有兩個值，第一個值為x軸方向的縮放比例或者px,第二個值為y軸方向的縮放比例或者px，如果只寫一個值，則第二個值默認為auto(根據圖片原來的比例，以及現有的寬度，來確定高度)

比方說：你有一張長寬比例為4:3的圖片，有一個width:100px;height:50px;的盒子(也就是長寬比例為2:1)。

background-size:100% 100%;這種方式設置完背景圖片的大小后，會完全鋪滿整個盒子，并且背景圖片的比例會因此改變為2:1
background-size:100%;這種方式設置的背景圖片的大小,x軸會和盒子一樣的寬，但是y軸由于默認為auto，根據上面的理論計算得背景圖片的高度為300px,但是盒子只有50px高，超出的部分隱藏，所以看兩種寫法的效果自然就不一樣啦。

第一種效果你一定會看到完整的背景圖片，但是有可能被擠壓(失去圖片原來的比例)

第二種效果你不一定能看到完整的圖片，但是圖片的比例沒有發生變化。