背景图片设置
1.背景圖片寬度問題
設置為背景圖片的圖片不夠寬,采用的又是不重復的方式,以至于不能完全覆蓋body或者父元素,這種情況下可以設置background-size;
background-size:length|percentage|cover|contain;
length:設置背景圖像的高度和寬度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
percentage:以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain:把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
?
2.背景圖片高度問題
假設給body添加了背景圖片,背景圖片比較大,比如背景圖片高度是500px,而body元素只有400px,此時背景圖片還是會全部覆蓋500px高度的地方,此時只要個html添加一個背景色即可。
html{
background-color:#fff;//這里設置的顏色應該和body的顏色一致
}
body{
background:#fff url(../../ife.baidu/task007/img/banner.png) no-repeat top left / cover;
}
?或者設置background-size:100% 100%; 也可以達到效果
轉載于:https://www.cnblogs.com/YangqinCao/p/5417239.html
總結
- 上一篇: 0420第一次团队合作
- 下一篇: Fedora下用Iptux,中文乱码解决