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


116

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

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

.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?

Réponses:


175

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

:afteret :beforeavec contentsont corrects à utiliser car ils sont pris en charge dans tous les principaux navigateurs autres qu'Internet Explorer au moins 5 versions en arrière. Internet Explorer a une prise en charge complète dans la version 9+ et une prise en charge partielle dans la version 8.

Est-ce ce que vous recherchez?

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

Sinon, pouvez-vous expliquer un peu mieux?

ou vous pouvez utiliser jQuery, comme Joshua l'a dit:

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


2
Ce. Le point de Joshua sur la compatibilité du navigateur est également juste - IE8 rend l'image dans le contenu: après, mais ne rendra pas les parties de celui-ci qui sont en dehors de la frontière du parent.
RSG du

Désormais (en 2017), IE 11 est la seule version d'IE encore prise en charge par Microsoft; donc, il n'y a pas grand chose à s'inquiéter de la compatibilité avec IE8. De plus, une solution CSS est presque toujours meilleure que la solution jQuery car elles ont tendance à se charger beaucoup plus rapidement et jQuery peut provoquer un scintillement de l'écran en réécrivant votre mise en page après le chargement de la page.
Nosajimiki

1
@Nosajimiki si vous devez ou non vous soucier des navigateurs plus anciens dépend principalement de vos visiteurs.
Jose Faeti

35

Vous devriez utiliser l'attribut background pour donner une image à cet élément, et j'utiliserais :: after au lieu d'avant, de cette façon, 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;
}

Merci pour la suggestion - le modal a une bordure, donc je ne pense pas que je puisse utiliser l'image d'arrière-plan pour positionner l'image de carotte au-dessus de la couleur de la bordure / bg si nécessaire.
RSG

Pourquoi pas? si vous positionnez absolument ce pseudo élément, vous pouvez le déplacer avec des marges. Il sera dessiné au-dessus des autres bordures d'élément et / ou de la couleur bg.
Jose Faeti

L'image d'arrière-plan ne peut pas s'étendre en dehors de la bordure du div?
RSG le

12
Vous devez probablement ajouter un contenu: ''; à ceci pour le faire apparaître
Willster

13

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

5
J'ai ajouté background-size: 33px 16px; background-repeat: no-repeat;pour redimensionner l'image!
Hasse Björk

-4

Le contenu et les versions antérieures ne sont pas très fiables sur tous les navigateurs. Je suggérerais de rester avec jQuery pour y parvenir. Je ne sais pas ce que vous faites pour déterminer si cette carotte doit être ajoutée ou non, mais vous devriez avoir une idée générale:

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

1
Cela me rend triste. Nous avons un ensemble heureusement limité de navigateurs ciblés, donc je suis toujours intéressé par ce qui est possible avec CSS.
RSG

Même avec le contenu fortement utilisé dans CSS3, d'après ce que j'ai vu, c'est toujours l'un de ceux qui ne sont entièrement pris en charge nulle part. Je pense que cela a à voir avec la peur de pouvoir injecter des choses mauvaises. De plus, je pense que le contenu a besoin d'un élément déjà existant pour l'injection - je ne sais pas si je peux manipuler le DOM autant par lui-même.
Joshua le

4
Cette réponse est fausse parce qu'elle n'a pas de support fiable sur les navigateurs. Contentet after/beforesont très fiables sur tous les principaux navigateurs, cela fonctionne depuis ie8, au moins FF3.5, au moins Chrome 9, au moins Opera 10.6, au moins Safari 3.2, chaque version d'iOS Safari, chaque version d'Opera mini, chaque version d'Opera Mobile, et jamais la version du navigateur Android. si vous voulez savoir si quelque chose est pris en charge par plusieurs navigateurs, consultez: caniuse.com/#search=:after
android.nick

Ce n'est pas parce qu'Internet le dit que c'est vrai. Travaillez avec eux, ils agissent différemment dans chaque navigateur. Et IE 7 est toujours un navigateur très populaire, qui ne prend en charge ni l'un ni l'autre.
Joshua

3
En fait, vous êtes mieux avec CSSplus JavaScriptsur celui - ci. Peu importe à quel point le navigateur est à la pointe de la technologie, l'utilisateur peut toujours l'avoir JavaScriptdésactivé ... Heureusement dans ce cas, les sélecteurs :beforeet :aftersont largement pris en charge; quirksmode.org/css/selectors
Steve Buzonas
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.