porcentaje - insertar imagen html url

¿Es posible establecer el equivalente de un atributo src de una etiqueta img en CSS?

Question

¿Es posible establecer el valor del atributo src en CSS? En este momento, lo que estoy haciendo es:

<img src="pathTo/myImage.jpg"/>

y quiero que sea algo como esto

<img class="myClass" />

.myClass {
some-src-property: url("pathTo/myImage.jpg");

Quiero hacer esto sin usar el background o background-image: propiedades en CSS.

Answer 1

Una colección de posibles métodos para configurar imágenes desde CSS

CSS2 ''s :after pseudo-element o la newer sintaxis ::after from CSS3 junto con el content: property:

_{Primera recomendación del W3C: hojas de estilo en cascada, especificación CSS2 de nivel 2, 12 de mayo de 1998}
^{Última Recomendación W3C: Selectores Recomendación Nivel 3 W3C 29 de septiembre de 2011}

Este método agrega contenido justo después del contenido del árbol de documentos de un elemento.

Nota: algunos navegadores reproducen experimentalmente la propiedad de content directamente sobre algunos selectores de elementos sin tener en cuenta incluso la última recomendación W3C que define:

Se aplica a: :before y :after pseudo-elementos

Sintaxis CSS2 (compatible con versiones posteriores):

.myClass:after {
content: url("somepicture.jpg");
}

Selector CSS3:

.myClass::after {
content: url("somepicture.jpg");
}

Representación predeterminada: Tamaño original (no depende de la declaración de tamaño explícito)

Esta especificación no define completamente la interacción de: antes y: después con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una futura especificación.

pero incluso en el momento de escribir esto, el comportamiento con una etiqueta <IMG> todavía no está definido y, aunque se puede usar de forma pirateada y no compatible con los estándares , ¡ no se recomienda el uso con <img> !

Gran método candidato, ver conclusiones ...

CSS1 ''s background-image: propiedad:

^{Primera recomendación del W3C: hojas de estilo en cascada, nivel 1 17 de diciembre de 1996}

Esta propiedad establece la imagen de fondo de un elemento. Al configurar una imagen de fondo, también se debe establecer un color de fondo que se utilizará cuando la imagen no esté disponible. Cuando la imagen está disponible, se superpone sobre el color de fondo.

Esta propiedad ha existido desde el principio de CSS y, sin embargo, merece una mención gloriosa.

Representación predeterminada: Tamaño original (no se puede escalar, solo se puede colocar)

Sin embargo ,

La propiedad de background-size: CSS3 mejoró en ella al permitir múltiples opciones de escalado:

^{Último estado del W3C: Recomendación del candidato Módulo de antecedentes y bordes de CSS Nivel 3 9 de septiembre de 2014}

[length> | <percentage> | auto ]{1,2} | cover | contain

Pero incluso con esta propiedad, depende del tamaño del contenedor.

Sigue siendo un buen método candidato, ver conclusiones ...

CSS2 ''s list-style: property junto con display: list-item :

^{Primera recomendación del W3C: hojas de estilo en cascada, especificación CSS2 de nivel 2, 12 de mayo de 1998}

list-style-image: propiedad establece la imagen que se utilizará como marcador de elemento de lista (viñeta)

Las propiedades de la lista describen el formato visual básico de las listas: permiten que las hojas de estilo especifiquen el tipo de marcador ( imagen , glifo o número)

display: list-item : este valor hace que un elemento (por ejemplo, <li> en HTML) genere un cuadro de bloque principal y un cuadro de marcador.

.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}

CSS abreviado: ( <list-style-type> <list-style-position> <list-style-image> )

.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}

Representación predeterminada: Tamaño original (no depende de la declaración de tamaño explícito)

Restricciones:

• La herencia transferirá los valores de ''estilo de lista'' de los elementos OL y UL a los elementos LI. Esta es la forma recomendada de especificar información de estilo de lista.

• No permiten a los autores especificar un estilo distinto (colores, fuentes, alineación , etc.) para el marcador de lista ni ajustar su posición

Este método tampoco es adecuado para la etiqueta <img> ya que la conversión no se puede realizar entre los tipos de elementos, y aquí está el truco limitado y no compatible que no funciona en Chrome.

Buen método candidato, ver conclusiones ...

border-image: CSS3 border-image: recomendación de propiedad:

^{Último estado del W3C: Recomendación del candidato Módulo de antecedentes y bordes de CSS Nivel 3 9 de septiembre de 2014}

Un método de fondo que se basa en la especificación de tamaños de una manera bastante peculiar (no definida para este caso de uso) y las propiedades de borde de reserva hasta ahora (por ejemplo, border: solid ):

Tenga en cuenta que, aunque nunca causan un mecanismo de desplazamiento, las imágenes iniciales pueden ser recortadas por un antepasado o por la ventana gráfica.

Este ejemplo ilustra la composición de la imagen solo como una decoración de esquina inferior derecha:

.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

Se aplica a: Todos los elementos, excepto los elementos de la tabla interna cuando el border-collapse: collapse

Aún así no se puede cambiar la etiqueta src <img> (pero aquí hay un truco ), en cambio, podemos decorarla:

.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0;
}

<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"

Buen método candidato para ser considerado después de la propagación de las normas.

También vale la pena mencionar el borrador de trabajo de la notación de element() CSS3 :

Nota: la función element() solo reproduce la apariencia del elemento referenciado, no el contenido real y su estructura.

<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

Usaremos el contenido renderizado de una de las dos imágenes ocultas para cambiar el fondo de la imagen en #img1 basado en el Selector de ID a través de CSS:

#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}

Notas: Es experimental y solo funciona con el prefijo -moz en Firefox y solo en las propiedades de background o background-image , también necesita tamaños especificados.

• element () Demo en vivo

Conclusiones

1. Cualquier contenido semántico o información estructural va en HTML.
2. El estilo y la información de presentación van en CSS.
3. Para propósitos de SEO, no escondas imágenes significativas en CSS.
4. Los gráficos de fondo suelen estar desactivados al imprimir.
5. Las etiquetas personalizadas se pueden usar y diseñar desde CSS, pero las versiones primitivas de Internet Explorer no se entienden sin la orientación de Javascript o CSS.
6. Los SPA (aplicaciones de una sola página), por diseño, generalmente incorporan imágenes en el fondo

Dicho esto, exploremos las etiquetas HTML adecuadas para la visualización de imágenes:

El elemento <li> [HTML4.01 +]

Perfecto caso de uso de la list-style-image con display: list-item método de display: list-item .

El elemento <li> , puede estar vacío, permite el contenido de flujo e incluso se permite omitir la etiqueta final </li> .

.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}

<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>

Limitaciones: difícil de diseñar ( width: o float: podría ayudar)

El elemento <figure> [HTML5 +]

El elemento de la figura representa algún contenido de flujo, opcionalmente con un título, que es independiente (como una oración completa) y generalmente se hace referencia como una sola unidad del flujo principal del documento.

El elemento es válido sin contenido, pero se recomienda que contenga una <figcaption> .

Por lo tanto, el elemento se puede utilizar para anotar ilustraciones, diagramas, fotos , listas de códigos, etc.

Representación por defecto: el elemento está alineado a la derecha, con el relleno izquierdo y derecho.

• FIGURA Live Demo

El elemento <object> [HTML4 +]

Para incluir imágenes, los autores pueden usar el elemento OBJETO o el elemento IMG.

El atributo de data es obligatorio y puede tener un tipo MIME válido como valor.

<object data="data:x-image/x,"></object>

Nota: un truco para hacer uso de la etiqueta <object> de CSS sería establecer un MimeType x-image/x válido personalizado seguido de ningún dato (el valor no tiene datos después de la coma requerida)

Representación predeterminada: 300 x 150 px, pero el tamaño puede especificarse en HTML o CSS.

• OBJETO Demo en vivo

La etiqueta <SVG>

Necesita un navegador compatible con SVG y tiene un elemento <image> para imágenes rasterizadas

• SVG Live Demo

El elemento <canvas> [HTML5 +].

El atributo de width defecto es 300 y el atributo de height defecto es 150 .

• CANVAS Live Demo

El elemento <input> con type="image"

Limitaciones:

... se espera que el elemento aparezca como un botón para indicar que el elemento es un botón.

que Chrome sigue y muestra un cuadrado vacío de 4x4 px cuando no hay texto

Solución parcial, establecer value=" " :

<input type="image" id="img1" value=" ">

• Tipo de ENTRADA = imagen Demo en vivo

También tenga cuidado con el próximo elemento <picture> en HTML5.1 , actualmente un borrador en funcionamiento .

Answer 2

Algunos datos que debería dejar en HTML, pero src mejor definir en CSS:

<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url(''../images/logo.png'');
}

Answer 3

Aquí hay una muy buena solución -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pros y contras):
(+) trabaja con imágenes vectoriales que tienen una anchura / altura relativa (algo que la answer no puede manejar)
(+) es navegador cruzado (funciona también para IE8 +)
(+) Solo usa CSS. Por lo tanto, no es necesario modificar el img src (o si no tiene acceso / no desea cambiar el atributo img src ya existente).
(-) lo siento, usa el atributo css de fondo :)

Answer 4

Código HTML:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don''t want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>

Código CSS:

span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* ''new background!!!'' */);
}

He estado estudiando html después de la escuela por unos días y quería saber cómo hacerlo. Descubrí el fondo y luego ponemos 2 y 2 juntos. Esto funciona al 100%. ¡Si no, asegúrate de rellenar las cosas necesarias! Necesitamos especificar altura, porque sin ella no habría nada !!! Te dejo este shell básico que puedes agregar.

Ejemplo:

 <!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS Sí, soy un usuario de Linux;)

Answer 5

Coloque varias imágenes en un contenedor "controlador" y cambie la clase del contenedor en su lugar. En CSS, agregue reglas para administrar la visibilidad de las imágenes según la clase del contenedor. Esto producirá el mismo efecto que cambiar la propiedad img src de una sola imagen.

HTML:

<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>

CSS:

#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green

Tenga en cuenta que cargará todas las imágenes, como con CSS backround-image s, pero a diferencia de cambiar img src través de JS.

Answer 6

Ellos están en lo correcto. IMG es un elemento de contenido y CSS se trata de diseño. Pero, ¿qué hay de cuando usas algunos elementos de contenido o propiedades para propósitos de diseño? Tengo IMG en mis páginas web que debo cambiar si cambio el estilo (el CSS).

Bueno, esta es una solución para definir la presentación de IMG (sin realmente la imagen) en estilo CSS.

1. Crea un gif transparente o png de 1x1.
   
2. Asigne la propiedad "src" de IMG a esa imagen.
   
3. Defina la presentación final con "imagen de fondo" en el estilo CSS.
   

Funciona a las mil maravillas :)

Answer 7

Encontré una forma mejor que las soluciones propuestas, pero de hecho usa la imagen de fondo. Método compatible (no se puede confirmar para IE6) Créditos: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

El CSS:

img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5''s bad box model */
height /**/:20px;
}

La imagen antigua no se ve y la nueva se ve como se espera.

La siguiente solución limpia solo funciona para webkit

img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'''';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}

Answer 8

Es probable que cualquier método basado en el background o background-image falle cuando el usuario imprime el documento con "imprimir colores e imágenes de fondo " desactivados. Lo que desafortunadamente es el predeterminado del navegador típico.

El único método compatible con la impresión y el navegador cruzado aquí es el propuesto por Bronx.

Answer 9

Hay una solución que descubrí hoy (funciona en IE6 +, FF, Opera, Chrome):

<img src=''willbehidden.png''
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Cómo funciona:

• La imagen se reduce hasta que ya no es visible por el ancho y la altura.
• Luego, debe "restablecer" el tamaño de la imagen con el relleno. Éste da una imagen de 16x16. Por supuesto, puedes usar padding-left / padding-top para hacer imágenes rectangulares.
• Finalmente, la nueva imagen se pone allí utilizando el fondo.
• Si la nueva imagen de fondo es demasiado grande o demasiado pequeña, recomiendo usar background-size de background-size por ejemplo: background-size:cover; que encaja tu imagen en el espacio asignado.

También funciona para enviar imágenes de entrada, se puede hacer clic en ellas.

Ver demostración en vivo: http://www.audenaerde.org/csstricks.html#imagereplacecss

¡Disfrutar!

Answer 10

Manera alternativa

.myClass {
background: url(''/img/loading_big.gif'');
}

<div class="myClass"></div>

Answer 11

No, no se puede establecer el atributo src de la imagen a través de CSS. Lo más cercano que puede acercarse es, como usted dice, background o background-image . No recomendaría hacerlo de todos modos, ya que sería algo ilógico.

Sin embargo, hay una solución CSS3 disponible para usted, si los navegadores a los que apunta pueden usarla. Use content:url como se describe en la respuesta de Pacerier . Puede encontrar otras soluciones para otros navegadores en las otras respuestas a continuación.

Answer 12

O podrías hacer esto que encontré en el interweb thingy.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}

Ocultando tan efectivamente la imagen y rellenando el fondo. Oh, qué hack, pero si quieres una etiqueta IMG con texto alternativo y un fondo que se pueda escalar sin usar JavaScript?

En un proyecto en el que estoy trabajando, creé una plantilla de bloques de héroe.

<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

Answer 13

Por lo que yo sé, NO PUEDES. CSS es sobre estilo y src de la imagen es contenido.

Answer 14

Puede definir 2 imágenes en su código HTML y usar display: none; Para decidir cuál será visible.

Answer 15

Puedes convertirlo con JS:

$(''.image-class'').each(function(){
var processing = $(this).attr(''src'');
$(this).parent().css({''background-image'':''url(''+processing+'')''});
$(this).hide();
});

Answer 16

Reiterar una solución anterior y subrayar la implementación de CSS pura aquí es mi respuesta.

Se necesita una solución Pure CSS en los casos en los que está comprando contenido de otro sitio y, por lo tanto, no tiene control sobre el HTML que se entrega. En mi caso, estoy tratando de eliminar la marca del contenido fuente con licencia para que el licenciado no tenga que anunciar la compañía de la que está comprando el contenido. Por lo tanto, estoy quitando su logotipo manteniendo todo lo demás. Debo tener en cuenta que esto está dentro del contrato de mi cliente para hacerlo.

{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}

Answer 17

Sé que esta es una pregunta muy antigua, sin embargo, no hay respuestas que proporcionen el razonamiento adecuado de por qué esto nunca puede hacerse. Si bien puede "hacer" lo que busca, no puede hacerlo de manera válida. Para tener una etiqueta img válida, debe tener los atributos src y alt.

Entonces, cualquiera de las respuestas que den una forma de hacer esto con una etiqueta img que no use el atributo src está promoviendo el uso de código no válido.

En resumen: lo que busca no se puede hacer legalmente dentro de la estructura de la sintaxis.

Fuente: Validador W3

Answer 18

Si está intentando agregar una imagen en un botón de forma dinámica según el contexto de su proyecto, puede usar el botón? Tomar como referencia la fuente basada en un resultado. Aquí estoy usando mvvm design para que mi valor de Model.Phases [0] determine si quiero que mi botón se rellene con imágenes de una bombilla encendida o apagada según el valor de la fase de luz.

No estoy seguro si esto ayuda. Estoy usando JqueryUI, Blueprint y CSS. La definición de la clase debería permitirte diseñar el botón según lo que quieras.

 <button>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

Answer 19

Si no desea establecer una propiedad de fondo, no puede establecer el atributo src de una imagen utilizando solo CSS.

Alternativamente, puede utilizar JavaScript para hacer tal cosa.

Answer 20

Solo usa HTML5 :)

<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>

Answer 21

Usé la solución div vacía, con este CSS:

#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}

HTML:

<div id="throbber"></div>

Answer 22

Usando CSS, no se puede hacer. Pero, si estás usando JQuery, algo como esto hará el truco:

$("img.myClass").attr("src", "http://somwhere");

Answer 23

Use content:url("image.jpg") .

Solución de trabajo completa ( demostración en vivo ):

<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>

Probado y funcionando:

• Chrome 14.0.835.163
• Safari 4.0.5
• Ópera 10.6

Probado y no funciona:

• FireFox 40.0.2 (observando las herramientas de la red del desarrollador, puede ver que la URL se carga, pero la imagen no se muestra)
• Internet Explorer 11.0.9600.17905 (la URL nunca se carga)

Answer 24

Yo añadiría esto: la imagen de fondo también podría posicionarse con la posición de background-position: xy; (x horizontal y vertical). (..) Mi caso, CSS:

(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)