FF und IE nicht geladen img src von CSS

Question

Ich bin wie dies

mein Bild

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

hier das src für ein Bild mit CSS-Einstellung

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

die Bild Lasten in Google Chrome mit dem richtigen img src (../Banners/prussia-awesomeness.gif)

im internet explorer und firefox hält es die src "as".

Unterstützt ie und ff das Laden von Bildquellen von css?

EDIT:

Zugabe

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

machte es in Firefox arbeiten, das heißt aber immer noch weigert, zu kooperieren.

auch versucht, und fügte hinzu: vor (mit: und: :), die

Answer 1

Es scheint, dass das Entfernen CSS Inhalt Eigenschaft nicht für IMG, sondern auch andere Elemente für IE & Safari funktioniert. Check out this Fiddle. Für Safari überprüfen Sie this aus.

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; 
} 

Es kann nicht mit IE8 funktionieren, wenn Sie DOCTYPE nicht haben! angegeben.

Für FF müssen Sie verwenden: vor oder: nach Pseudo-Elemente, damit es funktioniert. Für weitere Informationen gehen Sie durch this.

Answer 2

Nach MDN,

ist

Der Inhalt CSS-Eigenschaft mit der :: bevor verwendet keinen Unterschied in jedem Browser aus und :: nach Pseudo-Elementen, um Inhalt in einem Element zu generieren.

So verwendet content mit Pseudo-Elementen wie :after oder :before (einzelner Doppelpunkt ist für IE8 Kompatibilität). Etwas wie folgt aus:

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

Answer 3

versuchen, die doppelte Anführungszeichen zu einem Inhaltswert

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