Question

我正在为像这样的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（with：和：:)，这在任何浏览器中都没有区别

Answer 1

似乎CSS内容属性不适用于IMG，但其他元素适用于IE＆amp;苹果浏览器。查看this小提琴。对于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。

Answer 2

根据MDN，

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

因此，将content与:after或:before等伪元素一起使用（单冒号用于兼容IE8）。像这样：

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

Answer 3

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

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

FF和IE不从CSS加载img src

3 个答案: