div加载背景图片失败

踩坑1(background-size未设置)

坑点1：background-size属性未设置，图片的分辨率（大小），与div的长宽不一致，在一定的div大小内只能展示相同大小的图片内容，就像拿一个筛子筛了其中的一小块展示。如下：

<style >
.title{
    ...
    height:1.5rem;
    width: 100%;
    background: url("sh.png");
    ...
}

解决办法： 在样式内添加

	background-size: 100% 100%;    

但是这个样式添加的位置也有要求，这就是我们第二个坑。

踩坑2(background: url位置错误)

坑点2： 在设置background属性或其他background的某个具体属性的时候，比如说同时有background 和 background-color、background-position、background-size...属性时，应当先声明background属性，也就是把background属性放在所有相关属性的前方就好了，否则所有background属性都将失效,或者不使用background这种的简写形式。如下：

// 错误演示
<style >
.title{
    ...
    height:1.5rem;
    width: 100%;
    background-color: red;
    background-position:center;
    background-size: 100% 100%; 
    background: url("sh.png");
    ...
}

//正确写法
.title{
    ...
    height:1.5rem;
    width: 100%;
    background: url("sh.png");
    background-color: red;
    background-position:center;
    background-size: 100% 100%; 
    ...
}