css设置图片不显示的原因总结

首先确认代码已经保存，然后再查看原因。

1、css没有被调用

F12检查css调用是否成功，如果没成功一般是css的名称写错了。（注意css的层级关系）

如我这里在写样式的时候在.picker-btn后（红色箭头处）加了一个空格，直接导致图片无法渲染成功，删掉后渲染成功。
渲染后若图片显示不正常，记得设置图片大小：设置宽高或 设置 background-size: contain;

2、div设置错误容易导致背景图片高度太大则无法显示

3、背景图片调用路径错误

• css设置背景用的background，书写方式是.div{backgroud:url('1.jpg');}，检查一下css写对了没有，

• 图片不显示，还可能是因为图片的存放位置不对，如果你不清楚图片放在哪个文件夹应该怎么写，可以html文件跟图片放在一起，直接写backgroud:url('1.jpg');

4、背景元素没有宽度和高度

当元素没有宽高时，背景是显示不出来的。背景不会撑开元素。设置background-size。

div盒子没有内容，需要设置width、height，

5、元素不具备块属性

当元素不具有块属性的时候设置的高宽是无效的。所以也不会显示图片。记得加上 display: inline-block;

6、被同名css类的样式所覆盖。

假设前面有命名.bg设置了background显示图片，后面又命名了.bg又设置了background显示颜色。

此时需要打开控制台（按F12键）查看下CSS样式background属性。