div 背景图片没法显示的原因

最新推荐文章于 2023-08-03 14:51:24 发布

原创最新推荐文章于 2023-08-03 14:51:24 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #浏览器 #float #ie

本文讲述了在网页开发过程中遇到的关于IE浏览器下无法正确显示div背景图片的问题及解决方案，包括更改背景图片名称为英文、调整div浮动属性等。

最近正在开发网页，期间遇到了不少的问题，其中兼容性是最大的问题。

其中一个问题就是在设置div 的背景的图片的时候，在ie下没法正常显示。而在火狐浏览器下却能够正确的现实。后来经过多方查证这是因为使用的背景图片的名字是中文的，修改过来之后就可以了

还有的时候这种原因是因为设置了div 的浮动，而没有关闭浮动，这个是我在网上看到的，这个情况没有真正的遇到过他们所给的解决办法，有多种，

比如设置了子div 的浮动，这时没法显示子div 的背景图片，这时可能需要把父div 的float属性也进行设置。

还有的是因为没有设置子div 的高度，什么的，这时候就需要设置div的高度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

becomewangpan

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

当DIV高度为自动时,背景颜色无法显示的解决方法

12-13

IE6、7、8 不兼容，背景颜色设置在IE6中DIV高度设置为auto会正常显示颜色，IE7可以添加!important 解决，但IE8中背景颜色是定义多高就显示多高，自动高度的就不显色背景：包括图片和颜色。不知道大家有没有办法解决？？ DIV高度为自动，背景颜色无法显示问题 height:auto; 改成 height:100%; overflow:hidden;!important 这样就可以兼容 IE6、7、8 和谷歌火狐了

精选资源

在div底部显示背景图片实现代码

01-19

下面代码实现div层背景图片在底部显示：复制代码代码如下: div { background:url(/images/bg.jpg) no-repeat fixed; background-position-y:bottom; } 代码详解：复制代码代码如下: div { background-image:url...

参与评论您还未登录，请先登录后发表或查看评论

div背景图片或颜色不显示的解决办法

某年某月某条街

08-10

1万+

div背景图片或颜色不显示的解决办法背景图片不显示的原因主要有以下几个方面：css没有被调用 css图片地址不对 div的高度没有固定，是auto、没有设值或者高度不够 div被嵌套 div代码不规范解决办法：DIV高度为自动，背景颜色无法显示，在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important；同时还可以兼容 IE6、7、8

css在div块添加背景图片为何不显示呢？

热门推荐

Angiexia的专栏

03-11

3万+

1，css没有被调用 2，css图片地址不对 3，div的高度没有固定，是auto或者没有设值 4，div被嵌套， 5，div代码不规范 login.html文件 style.css文件 .header{ background-image:url(../image/icon.jpg); width:100%; height:100px; } 引用

div css背景图片不显示

weixin_33725270的博客

09-13

291

我们在写页面时，为了便于维护，css样式通常都是通过link外部导入html的，有时在css中写入背景图片时，此时背景图片的路径应该是相对css文件的。比如，此时的文件有index.html，css、img、js三个文件夹（各自存放css样式表、img图片、js文件），图片a.png在css背景图片的路径应为：../img/a.png，而不是相对于index.html文件的路径img/a.png。...

html div 转换图片不显示,div中css背景图片怎么不显示？

weixin_39602976的博客

05-30

3602

div的背景图片可以使用background-image属性设置，background-image属性会在元素的背景中设置一个图像。初始背景图像(原图像)根据 background-position 属性的值放置。背景图片不显示的问题。可能有以下几个原因：1、图片路径不正确。找不到图片当然不显示。2、背景元素没有宽度和高度。当元素没有宽高时，背景是显示不出来的。背景不会撑开元素。3、css代码写错...

DIV背景图片在Firefox下不显示通过overflow:auto可解决

09-25

标题提到的“DIV背景图片在Firefox下不显示通过overflow:auto可解决”就是一个典型的跨浏览器兼容性问题。在Firefox中，当一个`div`元素包含浮动元素（如`float:left`或`float:right`），这个`div`元素本身可能...

div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar

06-06

这就会导致背景图片显示不全，出现视觉上的bug。解决这个问题的一种方法是使用CSS3的响应式设计技术，如媒体查询（`media queries`），根据不同的屏幕尺寸调整背景图片的显示方式。例如： ```css div { ...

div中的背景图片不显示

welcome to daijiguo's blog

06-26

1586

如果只有以上代码，北京图片是不会显示的！！！需要在div标签中加点东西，字也好，图片也好，有了东西，背景才会显示。

div嵌套时背景图片不显示问题解决方法总结

LvandDuan的博客

09-09

4699

大部分在这里面看到的

div背景图片不显示的问题

tiantian1980的专栏

10-13

5354

现象：div背景图片不显示的问题解决问题步聚：１,改变一下控制div样式的css文件，例如：高设大点，或设一下边框的颜色，如果没改变的话，你知道什么原因了吧，样式的文件路径不对了。２,一般错在第二点，具体来说一下，　　这里写样式，是相对此html页或asp.net页的路径。如果这相div1在a.aspx这个页面的话，哪么样式背景图片就在a.aspx上级目录下的common/DivT

css在div块添加背景图片为何不显示呢

guxinaiheqiao的专栏

04-02

1330

1，css没有被调用 2，css图片地址不对 3，div的高度没有固定，是auto或者没有设值 4，div被嵌套， 5，div代码不规范原址:http://blog.youkuaiyun.com/angiexia/article/details/21017703

Vue+elementUl div背景图无法显示无法渲染

weixin_60457220的博客

08-03

628

【代码】Vue+elementUl div背景图无法显示无法渲染。

div之为什么你的图片不见了

u013361010的专栏

11-06

1024

在编写网页时，经常遇见这样的现象

解决背景在360极速模式下不显示的问题

weixin_34406086的博客

11-29

553

网站在ie和360兼容模式下，背景图片都显示很正常，但是在360极速模式下显示不出来，这主要因为没有设置宽和高的问题，导致无法显示，所以给背景设置宽高即可如：<td height=“70px” width="204" background=images/box.gif align="center"></td>...

jsp中给div加背景_JSP给DIV块状元素只能设置颜色，不能设置背景图片

weixin_32431435的博客

12-28

993

html代码如下-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html代码如下点餐管理主页 ...

CSS 导入背景图片不能显示

weixin_41514525的博客

05-15

6661

之前总出现这样的问题，明明文件存在，就是显示不出来，刚开始我还以为是CSS样式设置不正确，把它给挡住了。。。后来发现是导入背景图片的格式不对。 background: url('./checkbox.png'); 1. 文件的路径写成字符串的格式 2. 文件的路径必须写成 ./ 或者 ../ 的格式，之前 Hbuild 自动给我的路径，就没有这些，原来是它给的有问题。。。。 ...

成长经历：DIV标签设置背景色，没有显示背景色

jackcyJM的博客

09-19

3221

昨晚自学HTML的DIV属性时，发现设置的盒子无法显示出来，最终把问题的原因写出来，让跟我一样刚刚起步的小白可以知道： 1.我使用了类选择器去定义盒子的高和宽以及背景，但是在div 的前标签里面却写了id 属性，所以类选择器无效，只要改成class属性就可以了。所以类选择是是对class属性有效的。 ...

div 背景图片

最新发布

08-21

在 HTML 中，可以通过 CSS 为 `<div>` 设置背景图片。你可以使用 `background-image`、`background-size`、`background-position` 等属性来控制背景图的显示效果。 --- ## ✅ 基本用法：设置 `div` 背景图片 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Div Background Image</title> <style> .bg-div { width: 300px; height: 200px; background-image: url('https://via.placeholder.com/300x200'); background-size: cover; /* 图片覆盖整个 div */ background-position: center; /* 居中显示 */ background-repeat: no-repeat; /* 不重复 */ border: 1px solid #ccc; } </style> </head> <body> <div class="bg-div"></div> </body> </html> ``` --- ### 🔍 样式解释： | 属性 | 说明 | |------|------| | `background-image: url(...)` | 设置背景图路径 | | `background-size: cover` | 图片按比例缩放以完全覆盖容器，可能会裁剪 | | `background-size: contain` | 图片按比例缩放以适应容器，完整显示图片，可能会留白 | | `background-position: center` | 图片居中显示 | | `background-repeat: no-repeat` | 图片不重复 | --- ## ✅ Vue 中使用背景图如果你在 Vue 组件中使用背景图，可以结合 `data` 动态设置图片路径。 ```vue <template> <div class="bg-div" :style="{ backgroundImage: 'url(' + imageUrl + ')' }"> <h2>动态背景图</h2> </div> </template> <script> export default { data() { return { imageUrl: 'https://via.placeholder.com/300x200' }; }, }; </script> <style scoped> .bg-div { width: 300px; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; color: white; text-align: center; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; } </style> ``` --- ## ✅ 使用 SCSS 设置背景图（支持变量）如果你使用 SCSS，还可以使用变量来管理图片路径或样式： ```scss $image-url: 'https://via.placeholder.com/300x200'; .bg-div { width: 300px; height: 200px; background-image: url($image-url); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` --- ## ✅ 小结 | 方法 | 适用场景 | 是否支持动态 | |------|----------|---------------| | 静态 CSS | 固定背景图 | ❌ | | `:style` 绑定 | Vue 中动态背景图 | ✅ | | SCSS 变量 | 多处复用统一背景图 | ❌（编译时变量） | | CSS 变量 | 动态修改背景图 | ✅（需 JS 控制） | --- ###