在做前端项目的时候,大家经常会遇到背景图片无法显示的问题,今天给大家总结几点原因,及如何解决:
1、图片路径不对
在css文件中写图片路径要用相对路径,不可以使用*路径,
错误:background-image:url(http://sxxdispark.oss-cn-hangzhou.aliyuncs.com/upload/20171010/59dc3cd1bf1ee.png);
很容易出错:background-image:url(../20171010/59dc3cd1bf1ee.png);我们经常将“../”与“./”与“/”傻傻分不清
2、同时使用background-image与background属性,导致background-image图片显示不出来
.hero-section {
background-image:url(banner1.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background: #f3f3f3;
background-size: cover;
padding: 150px 0 0 0;
}
这样写导致添加的背景图片会被background背景色覆盖调。
解决办法:去掉background属性,改成background-color属性,这样即能加载出图片,又能在图片加载缓慢的同时有背景色填充!