ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-10 12:01:56  阅读:17  来源: 互联网

标签:总结 显示 background 设置 div css 图片


1、css没有被调用

F12检查css调用是否成功,如果没成功一般是css的名称写错了。

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

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

标签:总结,显示,background,设置,div,css,图片
来源: https://blog.csdn.net/github_40122084/article/details/115568546

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有