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属性。

css设置图片不显示的原因总结相关推荐

html语言图片无法居中,css设置图片无法居中是什么原因？
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,我们经常会设置图片居中显示,但有时我们会遇到css设置图片无法居中. 下面我们来看一下css设置图片无法居中是什么原因. css设置 ...
html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
CSS设置图片的对齐
CSS设置图片的对齐横向对齐方式图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...
CSS设置图片的重复
CSS设置图片的重复 CSS通过设置background-repeat属性来设置图片的重复方式,包括水平重复.竖直重复和不重复等. 图片的竖直方向重复. <span style="fo ...
html 设置图片左对齐,CSS设置图片的对齐
CSS设置图片的对齐横向对齐方式图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...
CSS设置图片的位置
CSS设置图片的位置 CSS通过background-position属性来调整背景图片的位置. 比如,当希望背景图片显示在页面的右下角时,可以设置属性值为bottomright即可. <spa ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
CSS设置元素叠加显示
CSS设置元素叠加显示的方式: 方法1:设置负margin: 给元素设置负margin使其移动后原来的位置是不会保留的负margin可以让元素的占用空间变小后面的元素可以覆盖当前的元素 (这里有 ...
CSS设置溢出文字显示省略号
CSS设置溢出文字显示省略号相关CSS .text-ellipse{ width: 100px;height:50px;border:2px solid red;overflow:hidden;te ...