Ich habe eine CSS-Klasse, Modal
die absolut positioniert, über dem übergeordneten Element z-indiziert und mit JQuery gut positioniert ist. Ich möchte ein Caret-Bild (^) oben in die Modalbox einfügen und wollte dies mit dem :before
CSS-Pseudo-Selektor sauber machen.
Das Bild muss unbedingt über dem Modal positioniert und z-indiziert sein, aber ich habe keine Möglichkeit gefunden, dem Bild im content
Attribut die entsprechende Klasse hinzuzufügen :
.Modal:before{
content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}
.ModalCarrot{
position:absolute;
left:50%;
margin-left:-8px;
top:-16px;
}
Zweitbeste Option - kann ich die Stile inline in das Inhaltsattribut einfügen?
R
s ^ _ ^Antworten:
http://caniuse.com/#search=:after
:after
und:before
mitcontent
sind in Ordnung zu verwenden, da sie in jedem wichtigen Browser außer Internet Explorer mindestens 5 Versionen zurück unterstützt werden. Internet Explorer bietet vollständige Unterstützung in Version 9+ und teilweise Unterstützung in Version 8.Ist es das, wonach du suchst?
Wenn nicht, können Sie es etwas besser erklären?
oder Sie könnten jQuery verwenden, wie Joshua sagte:
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
quelle
Sie sollten das Hintergrundattribut verwenden, um diesem Element ein Bild zu geben, und ich würde :: after anstelle von before verwenden. Auf diese Weise sollte es bereits über Ihrem Element gezeichnet sein.
quelle
1. Dies ist meine Antwort auf Ihr Problem.
quelle
background-size: 33px 16px; background-repeat: no-repeat;
, um das Bild zu skalieren!Inhalt und früher sind in allen Browsern sehr unzuverlässig. Ich würde vorschlagen, bei jQuery zu bleiben, um dies zu erreichen. Ich bin nicht sicher, was Sie tun, um herauszufinden, ob diese Karotte hinzugefügt werden muss oder nicht, aber Sie sollten die Gesamtidee bekommen:
quelle
Content
undafter/before
sind sehr zuverlässig in jedem großen Browser. Es funktioniert seit ie8, mindestens FF3.5, mindestens Chrome 9, mindestens Opera 10.6, mindestens Safari 3.2, jeder Version von iOS Safari, jeder Version von Opera mini, jeder Version von Opera Mobile und jeder Version des Android-Browsers. Wenn Sie wissen möchtenCSS
überJavaScript
auf diesem. Unabhängig davon, wie aktuell der Browser ist, kann der Benutzer immer nochJavaScript
deaktiviert haben ... Glücklicherweise werden in diesem Fall die Selektoren:before
und:after
weitgehend unterstützt. quirksmode.org/css/selectors