Usando: antes del pseudo elemento CSS para agregar una imagen a modal


116

Tengo una clase CSS Modalque está absolutamente posicionada, indexada en z por encima de su padre y bien posicionada con JQuery. Quiero agregar una imagen de intercalación (^) en la parte superior del cuadro modal y estaba buscando usar el :beforepseudo selector de CSS para hacer esto limpiamente.

La imagen debe estar absolutamente posicionada e indexada en z sobre el modal, pero no he encontrado ninguna forma de agregar la clase adecuada a la imagen en el contentatributo:

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

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

Segunda mejor opción: ¿puedo agregar los estilos en línea en el atributo de contenido?

Respuestas:


175

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

:aftery :beforecon contentson bien usar a medida que se admiten en todas las principales navegador que no sea Internet Explorer, al menos, 5 versiones posterior. Internet Explorer tiene soporte completo en la versión 9+ y soporte parcial en la versión 8.

¿Es esto lo que estás buscando?

.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 no es así, ¿puede explicarnos un poco mejor?

o puede usar jQuery, como dijo Joshua:

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


2
Esta. Sin embargo, el punto de Joshua sobre la compatibilidad del navegador también es correcto: IE8 representa la imagen en el contenido: after, pero no representa las partes que están fuera del límite principal.
RSG

Ahora (en 2017), IE 11 es la única versión de IE que todavía es compatible con Microsoft; por lo tanto, no tiene mucho sentido preocuparse por la compatibilidad con IE8. Además, una solución CSS es casi siempre mejor que la solución jQuery porque tienden a cargarse mucho más rápido y jQuery puede causar parpadeos en la pantalla al reescribir su diseño después de cargar la página.
Nosajimiki

1
@Nosajimiki, si debe o no preocuparse por los navegadores más antiguos, depende principalmente de sus visitantes.
Jose Faeti

35

Deberías usar el atributo de fondo para darle una imagen a ese elemento, y yo usaría :: after en lugar de before, de esta manera ya debería estar dibujado encima de tu elemento.

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

Gracias por la sugerencia, el modal tiene un borde, así que no creo que pueda usar la imagen de fondo para colocar la imagen de la zanahoria sobre el borde / color bg según sea necesario.
RSG

Por qué no? si coloca absolutamente ese pseudo elemento, puede moverlo con márgenes. Se dibujará sobre los otros bordes del elemento y / o el color de fondo.
Jose Faeti

¿La imagen de fondo no puede extenderse fuera del borde del div?
RSG

12
Probablemente necesite agregar un contenido: ''; a esto para que parezca
Willster

13

1.Esta es mi respuesta a tu problema.

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

5
¡Agregué background-size: 33px 16px; background-repeat: no-repeat;para escalar la imagen!
Hasse Björk

-4

Tanto el contenido como antes son muy poco fiables en todos los navegadores. Sugeriría seguir con jQuery para lograr esto. No estoy seguro de lo que está haciendo para averiguar si esta zanahoria debe agregarse o no, pero debería tener la idea general:

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

1
Esto me entristece. Afortunadamente, tenemos un conjunto limitado de navegadores específicos, por lo que todavía estoy interesado en lo que es posible con CSS.
RSG

Incluso con el contenido que se usa mucho en CSS3, por lo que he visto, sigue siendo uno de los que no son totalmente compatibles en ninguna parte. Creo que esto tiene que ver con cierto miedo a poder inyectar cosas malas. Además, creo que el contenido necesita un elemento ya existente al que inyectar, no estoy seguro de poder manipular el DOM tanto por sí mismo.
Joshua

4
Esta respuesta es incorrecta acerca de que tiene un soporte poco confiable en todos los navegadores. Contenty after/beforeson muy confiables en todos los navegadores principales, funciona desde ie8, al menos FF3.5, al menos Chrome 9, al menos Opera 10.6, al menos Safari 3.2, todas las versiones de iOS Safari, todas las versiones de Opera mini, todas las versiones de Opera Mobile y todas las versiones del navegador de Android. si desea saber si algo es compatible con varios
android.nick

El hecho de que Internet diga que lo es no significa que sea cierto. Trabaja con ellos, actúan de manera diferente en cada navegador. E IE 7 sigue siendo un navegador muy popular, que no es compatible con ninguno de ellos.
Joshua

3
En realidad, usted está mejor con CSSmás JavaScripten este caso. No importa qué tan avanzado sea el navegador, el usuario aún puede tener JavaScriptdeshabilitado ... Afortunadamente, en este caso, los selectores :beforey :afterson ampliamente compatibles; quirksmode.org/css/selectors
Steve Buzonas
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.