为啥内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用？

Posted 2023-03-06

【中文标题】为啥内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用？

【英文标题】：Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?为什么内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用？

【发布时间】：2011-08-16 08:10:57

【问题描述】：

为什么following example 在 Firefox 4 中显示图像，但在 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;

任何解决方法的想法？

【问题讨论】：

该示例在 Chrome 12.0.712.0 中也不起作用

以防万一：url(http://www.mypicx.com/uploadimg/1312875436_05012011_2.png) 注意：没有撇号 - url() 函数不需要它们。

天才 :) 我删除了撇号并解决了问题！

【参考方案1】：

它在我的 google chrome 浏览器版本 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 以防万一有隐藏的 id 标签并且它可以工作

【参考方案2】：

你还必须指定宽度和高度

 <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%;" >

【参考方案3】：

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

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

Demo here

【讨论】：

撇号在这里没有任何区别。这里还有其他一些问题。可能是@lpd 的回答（不允许盗链？）。您答案中的演示有效的唯一原因是它使用了http://i54.tinypic.com/4zuxif.jpg，而不是损坏的http://www.mypicx.com/uploadimg/1312875436_05012011_2.png。

这很奇怪...... W3 规范将它们列为可选，并且在 url 包含某些字符的情况下是必需的。 w3.org/TR/CSS21/syndata.html#uri

这也为我解决了这个问题......当我定义内联样式时。它适用于 ' 在 .css 文件中。背景图片：网址（Img/load.gif）；如果这不是一个正当的理由，那么想听听专家的更多意见。

我很想知道为什么会这样。我用 Chrome、Chromium、Safari、Firefox、IE 测试了我的网站，它只需要我删除 Chromium 的撇号。

感谢您挖掘规范。当我在 URI 中有一个空格并且我的图像没有出现时，我遇到了这个问题。把我逼疯了。解决方案是将您的 URI 用引号括起来。

【参考方案4】：

Chrome 11 在其调试器中显示以下内容：

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

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

编辑：看看当您使用普通的<img> 标签放置图像时，Chrome 会发生什么；)