web-dev-qa-db-fra.com

Utiliser: avant le pseudo-élément CSS pour ajouter une image au modal

J'ai une classe CSS Modal qui est absolument positionnée, z-indexée au-dessus de son parent et bien positionnée avec JQuery. Je voulais ajouter une image de curseur (^) en haut de la boîte modale et je cherchais à utiliser le pseudo-sélecteur :before CSS pour le faire proprement.

L'image doit être absolument positionnée et indexée au-dessus du modal, mais je n'ai trouvé aucun moyen d'ajouter la classe appropriée à l'image dans l'attribut content:

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

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

Deuxième meilleure option, puis-je ajouter les styles en ligne dans l'attribut de contenu?

cssmodal-dialogpseudo-element
101
RSG

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

:after et :before avec content peuvent être utilisés, car ils sont pris en charge par tous les principaux navigateurs autres qu'Internet Explorer et comportent au moins 5 versions. Internet Explorer prend en charge complètement la version 9+ et partiel de la version 8.

Est-ce ce que vous cherchez?

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

Si non, pouvez-vous expliquer un peu mieux?

ou vous pouvez utiliser jQuery, comme Joshua a dit:

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

155
android.nick

Vous devriez utiliser l'attribut background pour donner une image à cet élément, et j'utiliserais :: after au lieu de before, ainsi, il devrait déjà être dessiné au-dessus de votre élément.

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

1.c'est ma réponse à votre problème.

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