Html 为什么内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5846637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:20:28  来源:igfitidea点击:

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

htmlcssgoogle-chromeinternet-explorer-8background-image

提问by Misha Moroshko

Why the following exampleshows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8?

为什么以下示例在 Firefox 4 中显示图像,而在 Chrome 10 和 Internet Explorer 8 中不显示?

HTML:

HTML:

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>

CSS:

CSS:

div {
    width: 60px;
    height: 60px;
    border: 1px solid black;
}

Any ideas for workarounds?

任何解决方法的想法?

回答by Misha Moroshko

As c-smile mentioned: Just need to remove the apostrophes in the url():

正如 c-smile 提到的:只需要删除 中的撇号url()

<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>

Demo here

演示在这里

回答by Chetan Kumar

u must specify the width and height also

你还必须指定宽度和高度

 <section class="bg-solid-light slideContainer strut-slide-0" style="background-image: url(https://accounts.icharts.net/stage/icharts-images/chartbook-images/Chart1457601371484.png); background-repeat: no-repeat;width: 100%;height: 100%;" >

回答by lpd

Chrome 11 spits out the following in its debugger:

Chrome 11 在其调试器中输出以下内容:

[Error] GET http://www.mypicx.com/images/logo.jpgundefined (undefined)

[错误] GET http://www.mypicx.com/images/logo.jpg未定义(未定义)

It looks like that hosting service is using some funky dynamic system that is preventing these browsers from fetching it correctly. (Instead it tries to fetch the default base image, which is problematically a jpeg.) Could you just upload another copy of the image elsewhere? I would expect it to be the easiest solution by a long mile.

看起来托管服务正在使用一些时髦的动态系统,阻止这些浏览器正确获取它。(相反,它会尝试获取默认的基本图像,这是一个 jpeg 有问题的图像。)您可以将图像的另一个副本上传到其他地方吗?我希望它是最简单的解决方案。

Edit: See what happens in Chrome when you place the image using normal <img>tags ;)

编辑:当您使用普通<img>标签放置图像时,看看 Chrome 中会发生什么;)

回答by xLRDxREVENGEx

it is working in my google chrome browser version 11.0.696.60

它在我的 google chrome 浏览器版本 11.0.696.60 中工作

i created a simple page with no other items just basic tags and no seperate css file and got an image

我创建了一个简单的页面,没有其他项目,只有基本标签,没有单独的 css 文件,并得到了一个图像

this is what i setup <div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>i put an id just incase there was a hiddne id tag and it works

这是我设置的,<div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>我放了一个 id 以防万一有一个 hiddne id 标签,它可以工作