為什么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%;
}
標(biāo)標(biāo)喲
2017-01-26
3 回答
舉報(bào)
0/150
提交
取消
2017-01-27
background-size:這個(gè)屬性有兩個(gè)值，第一個(gè)值為x軸方向的縮放比例或者px,第二個(gè)值為y軸方向的縮放比例或者px，如果只寫一個(gè)值，則第二個(gè)值默認(rèn)為auto(根據(jù)圖片原來(lái)的比例，以及現(xiàn)有的寬度，來(lái)確定高度)
比方說(shuō)：你有一張長(zhǎng)寬比例為4:3的圖片，有一個(gè)width:100px;height:50px;的盒子(也就是長(zhǎng)寬比例為2:1)。
background-size:100% 100%;這種方式設(shè)置完背景圖片的大小后，會(huì)完全鋪滿整個(gè)盒子，并且背景圖片的比例會(huì)因此改變?yōu)?:1
background-size:100%;這種方式設(shè)置的背景圖片的大小,x軸會(huì)和盒子一樣的寬，但是y軸由于默認(rèn)為auto，根據(jù)上面的理論計(jì)算得背景圖片的高度為300px,但是盒子只有50px高，超出的部分隱藏，所以看兩種寫法的效果自然就不一樣啦。
第一種效果你一定會(huì)看到完整的背景圖片，但是有可能被擠壓(失去圖片原來(lái)的比例)
第二種效果你不一定能看到完整的圖片，但是圖片的比例沒有發(fā)生變化。
2019-03-16
這個(gè)問(wèn)題找到好多答案，我知道怎么用，但是真正是看這篇理解透徹的
2017-11-11
說(shuō)的很到位，比一些教程說(shuō)的清楚多了