2011-05-01 14 views
40

为什么following example在Firefox 4中显示图像,但在Chrome 10和Internet Explorer 8中不显示图像?为什么Chrome 10和Internet Explorer 8中的内联“背景图片”风格不起作用?

HTML:

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

CSS:

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

寻求解决方法的任何想法?

+0

的例子并不在Chrome 12.0.712.0工作或者 – 2011-05-01 05:31:37

+6

以防万一:'url(http://www.mypicx.com/uploadimg/1312875436_05012011_2.png)' 注意:没有撇号 - 'url()'函数不需要它们。 – 2011-05-01 06:14:39

+0

天才:)我删除了撇号,并解决了问题! – 2011-05-01 07:14:21

回答

73

由于CS英里提到:只需要删除的url()撇号:

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

Demo here

+2

撇号在这里没有任何区别。其他一些问题在这里玩。可能@ lpd的回答(不允许盗链)?在你的答案中演示的唯一原因是因为它使用'http:// i54.tinypic.com/4zuxif.jpg'而不是破碎的'http:// www.mypicx.com/uploadimg/1312875436_05012011_2.png'。 – thirtydot 2011-05-01 13:19:56

+2

这很奇怪...... W3规范列出它们是可选的,并且在url包含特定字符的情况下是必需的。 http://www.w3.org/TR/CSS21/syndata.html#uri – plainjimbo 2012-02-02 18:59:31

+0

这为我解决了这个问题以及...当我定义内联样式。它在'.css文件中正常工作。 background-image:url(Img/load.gif); 如果这不是一个有效的原因,那么想从专家那里听到更多。 – NoviceProgrammer 2012-06-30 20:49:08

4

铬11吐出在其调试器执行以下操作:

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

它看起来像该主机服务采用一种防止一些时髦动态系统这些浏览器无法正确读取。 (相反,它试图获取默认的基本图像,这是一个JPEG问题)。你能上传其他图像的副本吗?我希望它是一英里长的最简单的解决方案。

编辑:在Chrome中看到,当您将使用正常<img>标签的图像会发生什么;)

2

它工作在我的谷歌浏览器版11.0.696.60

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

这是我设置<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标签和它的作品

3

ü必须指定宽度和高度也

<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%;" > 
相关问题