Frage Verwenden: vor dem CSS-Pseudo-Element, um ein Bild zu modal hinzuzufügen


Ich habe eine CSS-Klasse Modal Das ist absolut positioniert, z-indiziert über seine Eltern und gut positioniert mit JQuery. Ich möchte ein Caret - Bild (^) an den Anfang der modalen Box hinzufügen und untersuchte es mit dem :before CSS-Pseudo-Selektor, um dies sauber zu machen.

Das Bild muss absolut positioniert und z-indexiert über dem Modal sein, aber ich habe keine Möglichkeit gefunden, die entsprechende Klasse zu dem Bild hinzuzufügen content Attribut:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

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

Zweitbeste Option: Kann ich die Styles inline in das content-Attribut einfügen?


75
2017-07-12 17:40


Ursprung


Antworten:


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

:after und :before mit content Es ist in Ordnung, sie zu verwenden, da sie in jedem größeren Browser außer dem Internet Explorer mit mindestens 5 Versionen unterstützt werden. Internet Explorer bietet vollständige Unterstützung in Version 9+ und teilweise Unterstützung in Version 8.

Ist das wonach Sie suchen?

.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, kannst du es etwas besser erklären?

oder du könntest jQuery benutzen, wie Joshua sagte:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");


129
2017-07-25 09:51



Sie sollten das background-Attribut verwenden, um diesem Element ein Bild zu geben, und ich würde :: after statt vorher verwenden, so sollte es bereits oben auf Ihrem Element gezeichnet werden.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

21
2017-07-12 17:46



1.Dies ist meine Antwort für Ihr Problem.

.ModalCarrot::before {
content:'';
background: ('blackCarrot.png');/*url of image*/
height: 16px;/*height of image*/
width: 33px;/*width of image*/
position: absolute;
}

10
2017-07-22 17:16



Inhalt und Vorher sind in beiden Browsern sehr unzuverlässig. Ich würde vorschlagen, mit 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 allgemeine Idee bekommen:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

-4
2017-07-12 17:48