FF 和 IE 不从 CSS 加载 img src答案

【问题标题】：FF and IE don't load img src from CSSFF 和 IE 不从 CSS 加载 img src
【发布时间】：2013-08-14 16:02:48
【问题描述】：

我正在为这样的 css 图像设置 src

#Banner {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

这是我的照片

   <div id="Header" class="Header">
        <img id="Banner" src="as"/>
    </div>

图片在谷歌浏览器中加载正确的 img src (../Banners/prussia-awesomeness.gif)

在 Internet Explorer 和 firefox 中，它将 src 保持为“原样”。

ie和ff不支持从css加载图片源吗？

编辑：

添加

#Banner:after {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

让它在 Firefox 中工作，但仍然拒绝合作。

还尝试添加 :before（带有 : 和 ::），这在任何浏览器中都没有区别

【问题讨论】：

FF 和 IE 确实有效。在 FF 中打开 Firebug 并单击“NET”选项卡并查看正在加载的内容。检查它确实是正确的路径。
ie 和 ff 不会从 css 加载 src。 img 保持“as”作为 src。我的问题是为什么它在 chrome 中加载时不加载 ie 和 ff。

标签： asp.net css browser

【解决方案1】：

似乎 CSS 内容属性不适用于 IMG，但其他元素适用于 IE 和 Safari。查看this Fiddle。对于 Safari，请查看this。

HTML：

<div id="Header" class="Header">
        <img id="Banner1" src="as"/>
    <h1 id="Banner">test</h1>
    </div>

CSS：

#Banner:before {
content: url(http://w3c.org/2008/site/images/favicon.ico);
width: 1000px;
}
#Banner1:before {
content: url(http://w3c.org/2008/site/images/favicon.ico);
width: 1000px;
}

如果您没有 DOCTYPE，它可能不适用于 IE8！指定。

对于 FF，您需要使用 :before 或 :after 伪元素来使其工作。欲了解更多信息，请通过this。

【讨论】：

【解决方案2】：

根据MDN，

content CSS 属性与 ::before 和 ::after 伪元素一起用于在元素中生成内容。

所以，将content 与:after 或:before 等伪元素一起使用（单冒号是为了兼容IE8）。像这样的：

#Banner:after {
    content: url(../Banners/prussia-awesomeness.gif);
    width: 1000px;
}

【讨论】：

查看我在帖子中添加的 MDN 链接。不要在 url 中添加双引号。
删除了没有效果的双引号
@user744610 你确定这样做会奏效吗？如果是，你能分享你提到的链接吗？
@user744610 嘿抱歉，这在没有伪选择器的情况下在这个小提琴中工作正常。 jsfiddle.net/venkateshwar/6W3dm。一定是路径错误的问题。
这个想法来自这个答案stackoverflow.com/a/11484688/744610 并且运行良好，直到我们尝试了 Internet Explorer 和 Firefox。 :after 建议使它也可以在 Firefox 中使用。剩下的就是弄清楚为什么它在ie中仍然不起作用

【解决方案3】：

尝试删除内容值的双引号

#Banner:after {
    content: url(../Banners/prussia-awesomeness.gif);
    width: 1000px;
}

【讨论】：