atributo de contenido de elementos img

Al inspeccionar las herramientas de Chrome Dev, me di cuenta de lo siguiente fragmento de CSS:atributo de contenido de elementos img

img { 
    content: url(image-src.png); 
}

que funciona perfectamente en Chrome (ver figura de abajo).

Chrome Dev Tools

Esto me permite definir el atributo src de una etiqueta > < img través de CSS. No funciona en Firefox. Hasta ahora, pensaba que no era posible modificar directamente el atributo src a través de css y no he encontrado a nadie hablando de esto. Entonces, ¿es solo una adición propietaria en Chrome o Chrome está implementando un borrador W3C o algo similar de lo que no estoy enterado?

Fuente

2012-06-24 Maximilian Hils

The content property as defined in CSS 2.1 se aplica a :before y :after pseudo-elementos solamente. Mediante reglas CSS, puede especificar cualquier propiedad para cualquier elemento, pero las especificaciones tienen limitaciones sobre qué propiedades "se aplican" (es decir, tienen efecto sobre) varios elementos.

El CSS3 Generated and Replaced Content Module, un Borrador de Trabajo, describe el content property como aplicable a todos los elementos. Tiene un ejemplo de reemplazar el contenido de un elemento h1 por una imagen, y seguramente lo mismo podría hacerse con un elemento img.

Pero es solo un Borrador de Trabajo. Los recursos habituales en el estado de implementación de CSS, QuirksMode.org CSS info y Caniuse.com, no indican la situación; que sólo describen el apoyo a content para :before y :after (que es bastante universal, excepto IE 7 y versiones anteriores

Fuente

2012-06-24 05:19:28

No sólo es sólo un WD, pero parece estar abandonado. No tengo idea de a dónde van estas implementaciones o si alguna vez van a implementar este módulo por completo. – BoltClock

@BoltClock, el WD no se ha trabajado desde 2003, pero en el documento de descripción general del W3C http : //www.w3.org/Style/CSS/current-work.en.html está en la sección "Reescritura", no en "Abandonado". Es un Borrador del Editor del 17 de abril de 2012, aunque no sé cómo se relaciona su contenido con el borrador de 2003. Esperaría que el soporte al 'contenido' para elementos normales se vuelva más común; además de Chrome, Opera y Safari ya lo admiten. –

Ahhh, no había visto eso. ¡Gracias! – BoltClock

-1

Ahora usted puede hacer lo siguiente:.http://chabada.esy.es/tests/0004.html

<style> 
    .redcross { 
    background: transparent url('redcross.png') no-repeat; 
    display: block; 
    width: 24px; 
    height: 24px; 
    } 
</style> 

<img class="redcross">

Fuente

2014-08-16 10:02:51 Baghera

Pero necesita conocer las dimensiones en píxeles de la imagen; de lo contrario, se recortará. – shuckc

atributo de contenido de elementos img

Respuesta

Cuestiones relacionadas