css中background的使用總結(jié)

發(fā)布時間：2020-07-13 08:47:54 來源：網(wǎng)絡(luò) 閱讀：494 作者：歆冉欄目：web開發(fā)

效果:

css中background的使用總結(jié)

效果:

css中background的使用總結(jié)

效果:

css中background的使用總結(jié)

4 background-size的用法

css中background的使用總結(jié)

注意:盒子的大小是:

寬度:500px 高度:150px;

圖片的實際大小:寬度:533px 高度:300px;

此時的效果:

css中background的使用總結(jié)

注意:寬度是100% 高度是auto:

所以超出的部分會隱藏掉

另一種情況:

css中background的使用總結(jié)

此時的效果:

css中background的使用總結(jié)

此時圖片的高度小于容器的高度所以容器多出了很多空白地方

所以說:background:100%; 是有兩種呈現(xiàn)的效果。要么隱藏掉多余的部分圖片，要么容器活出空白地方

css中background的使用總結(jié)

此時的效果:

css中background的使用總結(jié)

6 css中background的使用總結(jié)

此時的效果:

css中background的使用總結(jié)

此時圖片并沒有顯示完全

總結(jié):

background-size:100%; // 寬度100% 高度auto(按圖片本身的寬/高比進行縮放顯示) 這種不一定會鋪滿整個容器也有可能超出的部分會被隱藏掉

backgrond-size:100% 100%; // 寬度100% 拉伸高度也是100% 拉伸這種一定會鋪滿整個容器

background-size:cover; // 也會鋪滿整個容器大小圖片比例不變

向AI問一下細節(jié)

猜你喜歡