html - attribute - ¿Antes de no trabajar en img elements?

title html

Question

Estoy tratando de usar el selector :before para colocar una imagen sobre otra, pero me parece que simplemente no funciona para colocar una imagen antes de un elemento img , solo un elemento más. Específicamente, mis estilos son:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

y me parece que esto funciona bien:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

pero esto no lo hace

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

Puedo usar un elemento div o p lugar de ese span , y el navegador superpone correctamente mi imagen sobre la imagen en el elemento img , pero si aplico la clase de superposición al img sí, no funciona.

Me gustaría que esto funcionara porque ese span adicional me ofende, pero lo más importante es que tengo alrededor de 100 publicaciones de blog que me gustaría modificar, y puedo hacer esto de una vez si pudiera modificar la hoja de estilo. , pero si tengo que regresar y agregar un elemento de span adicional span elementos a y img , esto será mucho más trabajo.

Answer 1

Aquí hay otra solución que usa un contenedor div para img mientras usa :hover::after para lograr el efecto.

El HTML de la siguiente manera:

<div id=img_container><img src='''' style=''height:300px; width:300px;''></img></div>

El CSS de la siguiente manera:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''''); 
    z-index:1; 
    top:0;
} 

Para verlo en acción, revisa el fiddle que he creado. Solo para que sepa que este es compatible con todos los navegadores y no hay necesidad de engañar al código con "contenido falso".

Answer 2

Creo que la mejor manera de ver por qué esto no funciona es antes y después de insertar su contenido antes o después del contenido de la etiqueta a la que se aplica. Así que funciona con divs o spans (o la mayoría de las otras etiquetas) porque puedes poner contenido dentro de ellos.

<div>
:before
Content
:after
</div>

Sin embargo, un img es una etiqueta autocontenida, de cierre automático, y como no tiene una etiqueta de cierre separada, no puede poner nada dentro de ella. (Eso debería parecerse a <img>Content</img> , pero por supuesto eso no funciona).

Sé que este es un tema antiguo, pero aparece primero en Google, así que espero que esto ayude a otros a aprender.

Answer 3

Desafortunadamente, la mayoría de los navegadores no admiten el uso de :after o :before en img tags.

http://lildude.co.uk/after-css-property-for-img-tag

Sin embargo, es posible que logre lo que necesita con JavaScript / jQuery. Echa un vistazo a este violín:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $(''.target'').after(''<img src="..." />'');

});

Editar :

Por la razón por la que esto no es compatible, revisa la respuesta de coreyward .

Answer 4

Encontré una manera de hacer este trabajo en css puro:

El método solo soy contenido falso

un método CSS puro para habilitar img: after.

Puedes consultar el CodePen: solo soy contenido falso o ver la fuente .

Fuente

HTML

<img
    alt="You are watching the ~ I''m just fake content ~ method"  
/>

CSS

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I''m just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

Soporte del navegador

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Sin soporte

⊗ Internet Explorer 8/9

Por favor prueba en otros navegadores

Answer 5

Intenté y encontré un método más simple para hacerlo. Aquí está el HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

Lo que hice fue colocar una etiqueta <p> vacía después de mi etiqueta de imagen. Ahora usaré p :: before para mostrar la imagen y posicionarla de acuerdo con mis necesidades. Aquí está el CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url(''messages.png'');
}

Intentalo.

Answer 6

Los pseudo-selectores anteriores y posteriores no insertan elementos HTML: insertan texto antes o después del contenido existente del elemento seleccionado. Debido a que los elementos de la imagen no contienen texto o no tienen descendientes, ni img:before ni img:after te harán ningún bien. Este es también el caso de elementos como <br> y <hr> por la misma razón.