6

我正在为带有这样的 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 保持为“as”。

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

编辑：

添加

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

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

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

4

3 回答 3

2

根据MDN，

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

因此，请与orcontent之类的伪元素一起使用（单冒号是为了与 IE8 兼容）。像这样的东西：:after:before

#Banner:after {
    content: url(../Banners/prussia-awesomeness.gif);
    width: 1000px;
}
于 2013-08-13T06:55:44.530 回答
2

似乎 CSS 内容属性不适用于 IMG，但其他元素适用于 IE 和 Safari。看看这个小提琴。对于 Safari，请查看此内容。

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 伪元素来使其工作。有关更多信息，请通过此。

于 2013-08-13T08:30:57.623 回答
0

尝试将双引号删除到内容值

#Banner:after {
    content: url(../Banners/prussia-awesomeness.gif);
    width: 1000px;
}
于 2013-08-13T06:55:45.307 回答