Verwenden von: vor dem CSS-Pseudoelement, um dem Modal ein Bild hinzuzufügen

116

Ich habe eine CSS-Klasse, Modaldie 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 :beforeCSS-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 contentAttribut 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?

RSG
quelle
107
Sie müssen aufhören, es "Karotte" zu nennen.
dreißig Punkte
2
@thirtydot Das ist das Problem mit Sprachen, die nicht ihre Rs ^ _ ^
rollen

Antworten:

175

http://caniuse.com/#search=:after

:afterund :beforemit contentsind 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?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

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' />");

android.nick
quelle
2
Dies. Joshuas Argument zur Browserkompatibilität ist jedoch auch richtig - IE8 rendert das Bild im: after-Inhalt, rendert jedoch nicht die Teile davon, die sich außerhalb des Rahmens der Eltern befinden.
RSG
Jetzt (im Jahr 2017) ist IE 11 die einzige Version von IE, die noch von Microsoft unterstützt wird. Es macht also nicht viel Sinn, sich über die IE8-Kompatibilität Gedanken zu machen. Außerdem ist eine CSS-Lösung fast immer besser als die jQuery-Lösung, da sie tendenziell viel schneller geladen wird und jQuery Bildschirmflimmern verursachen kann, indem Sie Ihr Layout nach dem Laden der Seite neu schreiben.
Nosajimiki
1
@Nosajimiki Ob Sie sich über ältere Browser Gedanken machen sollten oder nicht, hängt hauptsächlich von Ihren Besuchern ab.
Jose Faeti
34

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.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
Jose Faeti
quelle
Vielen Dank für den Vorschlag - das Modal hat einen Rand, sodass ich nicht glaube, dass ich das Hintergrundbild verwenden kann, um das Karottenbild nach Bedarf über dem Rand / der Hintergrundfarbe zu positionieren.
RSG
Warum nicht? Wenn Sie dieses Pseudoelement absolut positionieren, können Sie es mit Rändern verschieben. Es wird über die anderen Elementränder und / oder die Hintergrundfarbe gezeichnet.
Jose Faeti
Das Hintergrundbild kann sich nicht über den Rand des Div hinaus erstrecken.
RSG
12
Sie müssen wahrscheinlich einen Inhalt hinzufügen: ''; dazu, um es erscheinen zu lassen
Willster
13

1. Dies ist meine Antwort auf Ihr Problem.

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
hoang thao
quelle
5
Ich habe hinzugefügt background-size: 33px 16px; background-repeat: no-repeat;, um das Bild zu skalieren!
Hasse Björk
-4

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:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
Joshua
quelle
1
Das macht mich traurig. Wir haben eine gnädigerweise begrenzte Anzahl von Zielbrowsern, daher bin ich immer noch daran interessiert, was mit CSS möglich ist.
RSG
Selbst wenn Inhalte in CSS3 häufig verwendet werden, handelt es sich, wie ich gesehen habe, immer noch um solche, die nirgendwo vollständig unterstützt werden. Ich glaube, das hat mit der Angst zu tun, böse Dinge injizieren zu können. Ich glaube auch, dass Inhalte ein bereits vorhandenes Element benötigen, in das sie eingefügt werden können - ich bin mir nicht sicher, ob ich das DOM so oft selbst manipulieren kann.
Joshua
4
Diese Antwort ist falsch, da sie eine unzuverlässige Unterstützung für alle Browser bietet. Contentund after/beforesind 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öchten
android.nick
Nur weil das Internet sagt, dass es so ist, heißt das nicht, dass es wahr ist. Arbeiten Sie mit ihnen, sie verhalten sich in jedem Browser anders. Und IE 7 ist immer noch ein sehr beliebter Browser, der keinen von beiden unterstützt.
Joshua
3
Eigentlich sind Sie besser dran mit CSSüber JavaScriptauf diesem. Unabhängig davon, wie aktuell der Browser ist, kann der Benutzer immer noch JavaScriptdeaktiviert haben ... Glücklicherweise werden in diesem Fall die Selektoren :beforeund :afterweitgehend unterstützt. quirksmode.org/css/selectors
Steve Buzonas