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

533

¿Es posible configurar el src valor atributo en CSS? En la actualidad, 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 las propiedades backgroundo background-image:en CSS.

html css image Rakesh Juyal
fuente
1
Aparentemente, esto será posible en CSS3: w3.org/TR/css3-values/#attribute
graphicdivine
77
Ahora es posible Probado en Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier el
2
Pero FireFox 30.0, Internet Explorer 11.0 no es compatible
Laxmikant Dange
Esta solución de CSS solo funcionó para mí (en todos los navegadores): stackoverflow.com/a/19114098/448816 , con la excepción de que tuve que agregar: 'background-size: 100%;'.
mikhail-t
(2020) Puede hacerlo con JS getPropertyValue("--src")ver: jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny '365CSI' Engelman

Respuestas:

882

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

Solución de trabajo completa ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
Expandir fragmento

Probado y funcionando:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Probado y no funciona:

  • FireFox 40.0.2 (observando las herramientas de 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)
Pacerier
fuente
77
@gotqn, solo Chrome Safari Opera hasta ahora.
Pacerier
36
@EricG, diferentes aplicaciones tienen diferentes requisitos. Si no cumple con sus requisitos, no lo use. Si es así, úsalo.
Pacerier
44
No funciona IE10 es un no-go. Olvidamos IE7 (no hablemos de IE6). IE8 también, si es necesario. Pero IE9 - IE10 ... no.
Rolf
11
Vale la pena añadir que incluso en los navegadores que permiten asignar contenta img, cambia su comportamiento. La imagen comienza a ignorar los atributos de tamaño, y en Chrome / Safari pierde las opciones del menú contextual como 'Guardar imagen'. Esto se debe a que asignar un elemento contentconvertido efectivamente imgde un elemento reemplazado vacío a algo parecido <span><img></span>.
Ilya Streltsyn
3
sin el soporte adecuado del navegador, no veo esto como una respuesta válida, lo siento.
emachine
183

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 encoge hasta que ya no es visible por el ancho y la altura.
  • Luego, debe 'restablecer' el tamaño de la imagen con relleno. Este da una imagen de 16x16. Por supuesto, puede usar padding-left / padding-top para hacer imágenes rectangulares.
  • Finalmente, la nueva imagen se coloca allí usando el fondo.
  • Si la nueva imagen de fondo es demasiado grande o demasiado pequeña, recomiendo usar, background-sizepor ejemplo: background-size:cover;que se ajuste a su imagen en el espacio asignado.

También funciona para enviar-ingresar-imágenes, permanecen cliqueables.

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

¡Disfrutar!

RobAu
fuente
66
@RobAnu: Esto funciona bastante bien - jsfiddle
TimPietrusky
99
Tengo que decirte que esto es fascinante e inteligente, pero un DIV vacío es más sencillo.
Volomike
11
En este caso lo es. Sin embargo, hay casos en los que no puede controlar el HTML y, no obstante, desea manipular el IMG. Allí esta solución también funcionará
RobAu
2
Si la imagen tiene un srcatributo, esta es la técnica que necesita. +1 - me ayudó mucho
James Long
3
No se clasifica en esta respuesta, que podría ser la solución para algunas aplicaciones, pero este método tiene una limitación. No tiene control sobre las dimensiones de la representación del archivo de imagen. En uso normal, puede controlar el ancho de alto de una imagen, si el archivo se especifica en la fuente. Pero esto básicamente no es diferente de un div con una imagen de fondo, donde si tu div es más grande que la imagen, no tienes suerte.
TARKUS
114

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

El :afterpseudo-elemento de CSS2 o la sintaxis más nueva::after de CSS3 junto con elcontent: propiedad:

Primera recomendación del W3C: Hojas de estilo en cascada, nivel 2, especificación CSS2 12 de mayo de 1998
Última recomendación del W3C: Selectores Nivel 3 Recomendación del 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 procesan experimentalmente la contentpropiedad directamente sobre algunos selectores de elementos sin tener en cuenta incluso la última recomendación del W3C que define:

Se aplica a: :beforey :afterpseudoelementos

Sintaxis CSS2 (compatible con reenvío): 

.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 explícita de tamaño)

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

pero incluso en el momento de escribir estas líneas, el comportamiento con una <IMG>etiqueta aún no está definida y, aunque puede ser utilizado en una manera hackeado y no compatible con las normas , el uso con <img>no se recomienda !

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 comienzo de CSS y, sin embargo, merece una mención gloriosa.

Representación predeterminada: Tamaño original (no puede escalarse, solo colocarse)

Sin embargo ,

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

Último estado del W3C: Módulo de fondos y fronteras CSS de recomendación de candidatos 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, vea las conclusiones ...

CSS2 's list-style:propiedad junto condisplay: list-item :

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

list-style-image: La 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 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 explícita de tamaño)

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 para 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 la lista o ajustar su posición

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

Buen método candidato, ver conclusiones ...

CSS3 's border-image:propiedad recomendación :

Último estado del W3C: Módulo de fondos y fronteras CSS de recomendación de candidatos Nivel 3 9 de septiembre de 2014

Un método de tipo 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 causen un mecanismo de desplazamiento, las imágenes iniciales pueden ser recortadas por un antepasado o por la ventana gráfica.

Este ejemplo ilustra la imagen que se compone 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 internos de la tabla cuando border-collapse: collapse

Todavía no se puede cambiar una <img>etiqueta de 's src(pero aquí hay un truco ), en lugar podemos decorarlo:

Mostrar fragmento de código

Buen método candidato para ser considerado después de la propagación de estándares.

El borrador de trabajo deelement() notación de CSS3 también merece una mención:

Nota: La element()función 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 #img1función del 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 -mozprefijo en Firefox y solo sobre backgroundo background-imagepropiedades, también necesita tamaños especificados.

Conclusiones

  1. Cualquier contenido semántico o información estructural va en HTML.
  2. La información de estilo y presentación va en CSS.
  3. Para fines de SEO, no oculte imágenes significativas en CSS.
  4. Los gráficos de fondo generalmente se desactivan al imprimir.
  5. Las etiquetas personalizadas se pueden usar y diseñar desde CSS, pero las versiones primitivas de Internet Explorer no entienden] ( es decir, sin diseñar etiquetas HTML5 (con shiv) ) sin la guía de JavaScript o CSS .
  6. Las SPA (Aplicaciones de página única), por diseño, generalmente incorporan imágenes en segundo plano.

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

El <li>elemento [HTML4.01 +]

Caso de uso perfecto list-style-imagecon el display: list-itemmétodo.

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

Mostrar fragmento de código

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

El <figure>elemento [HTML5 +]

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

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

El elemento se puede usar para anotar ilustraciones, diagramas, fotos , listados de códigos, etc.

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

El <object>elemento [HTML4 +]

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

¡El dataatributo 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 <object>etiqueta desde CSS sería establecer un MimeType válido personalizadox-image/x 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 se puede especificar en HTML o CSS.

La <SVG>etiqueta

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

El <canvas>elemento [HTML5 +].

El widthatributo predeterminado es 300 y el heightatributo predeterminado es 150 .

El <input>elemento contype="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 representa un cuadrado vacío de 4x4 px cuando no hay texto

Solución parcial, establecer value=" ": 

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

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

CSᵠ
fuente
(2020) Use las propiedades CSS: stackoverflow.com/questions/2182716/…
Danny '365CSI' Engelman
Gran respuesta, pero muestra el fracaso completo de la web como plataforma para proporcionar primitivas básicas.
serraosayos
26

Utilicé 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>
Emmanuel Touzery
fuente
¿Qué sucede si quiero mostrarlo en línea? Agregar "display: inline" da mi dimensión div de 0x0 ...
elsurudo
1
@elsurudo Use display: inline-block si desea establecer un ancho y alto en un elemento en línea
Erin Drummond
1
La respuesta principal no funciona con Firefox, ¡así que me gusta más tu respuesta! Y es claro y no tiene hacks css.
Sergey Bogdanov
Si necesita mostrar más de una imagen, tenga en cuenta que técnicamente se supone que el campo id es único, por lo que es ideal usar un selector de clase CSS en lugar de la ID.
mix3d
Las imágenes de este tipo no se imprimirán correctamente si tiene gráficos de fondo desactivados en la configuración de impresión.
posfan12
14

Encontré una mejor manera que las soluciones propuestas, pero sí utiliza la imagen de fondo. Método conforme (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 anterior no se ve y la nueva se ve como se esperaba.


La siguiente solución ordenada 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 */

}
EricG
fuente
Este es un buen truco, pero ¿cumple realmente con los estándares? La página W3C dice que la contentpropiedad solo se aplica a las :beforey :afterpseudo clases. Además, si tiene que admitir IE7 o anterior, creo que el contentsoporte es inexistente. Aún así, muy tentador.
jatrim
Tienes razón, acabo de encontrar un método más compatible. ¡Actualizando mi publicación! Ahora votame;) Jaja.
EricG
El enfoque actualizado es definitivamente mejor que el que se basa en el contenido. Gracias por incluir el enlace original. Eso fue perspicaz. Notarás que la respuesta de @ RobAu también es muy similar a tu versión actualizada.
jatrim
1
@jatrim La contentpropiedad se aplica a todos los elementos. http://www.w3.org/TR/css3-content/#content
XP1
13

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

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

  1. crear un gif transparente 1x1 o png.
  2. Asigne apropiadamente "src" de IMG a esa imagen.
  3. Defina la presentación final con "background-image" en el estilo CSS.

Funciona a las mil maravillas :)

Franco
fuente
55
-1 A pesar de que su respuesta no es malo, específicamente menciona que él no quiere utilizarbackground*
fresskoma
1
este es un truco ... en mi opinión, los navegadores cambiarán los trucos ... y un día por la mañana verás un infierno en tu sitio web: D :)))
Mahdi Jazini
11

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

Pro (s) y Con (s):
(+) funciona con vector imagen que tiene un ancho / alto relativo (algo que la respuesta de RobAu no maneja) (+) es un 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 :)


OviC
fuente
Ahora, esa es la solución adecuada, funciona para mí en todos los navegadores, ¡gracias! También vale la pena mencionar que tuve que agregar: background-size: 100%; a la clase css en la solución anterior para que la imagen de reemplazo se muestre correctamente.
mikhail-t
9

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

Kostas Andrianopoulos
fuente
Estaba buscando una solución que respondiera a la Web pero que también mantuviera el SEO. Quería usar consultas de medios en CSS para cambiar mi imagen dependiendo del dispositivo utilizado, pero quería mantener mi contenido en HTML. Declarar fuentes en CSS era una ruta que no quería tomar, por background-imagelo que no era una opción. Quería imgetiquetas para fines de SEO. ¡Tu respuesta es tan simple, elegante y resuelve todos mis obstáculos! ¡Bravo! Además, el usuario no tiene que descargar ambas imágenes. Además, puedo agregar cualquier cantidad de imágenes.
Xavier
Cada respuesta que leí hasta ahora me obligaría a declarar mis fuentes en mi hoja de estilo o usar CSS en línea en mi marcado. Ninguno de los cuales estaba satisfecho. Código desordenado!
Xavier
7

No, no puede establecer el atributo src de la imagen a través de CSS. Lo más cercano que puede llegar es, como usted dice, backgroundo 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 se dirige pueden usarla. Use content:url como se describe en la respuesta de Pacerier . Puede encontrar otras soluciones para varios navegadores en las otras respuestas a continuación.

cletus
fuente
1
¿Por qué el voto negativo? Esta respuesta es más precisa que la respuesta aceptada.
harsimranb
1
La mejor respuesta hasta ahora: NO, no puedes hacerlo con CSS.
Milche Patern
4

Coloque varias imágenes en un contenedor "controlador" y, en su lugar, cambie la clase del contenedor. En CSS, agregue reglas para administrar la visibilidad de las imágenes según la clase del contenedor. Esto producirá el mismo efecto que cambiarimg src propiedad 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 precargará todas las imágenes, como con CSS backround-images, pero a diferencia de cambiar a img srctravés de JS.

Bronx
fuente
3

Forma alternativa

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Tukaz
fuente
3

Algunos datos los dejaría en HTML, pero es mejor definir el src en CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
Renat Gatin
fuente
2

Que yo sepa, NO PUEDES. CSS es sobre estilo y el src de la imagen es contenido.

NawaMan
fuente
3
Hoy en día, con bastante frecuencia hay imágenes solo para darle estilo a la página.
Lorenzo Polidori
2
La implicación es que puede haber una diferencia entre las imágenes utilizadas como bordes, fondos, etc., y las que realmente forman parte del contenido de la página, es decir. diagramas, fotos de artículos, etc.
Rhys van der Waerden
1
PUEDES, y hay casos comunes y válidos en los que te gustaría.
ryan0
2

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

Se necesita una solución CSS pura en los casos en que obtiene 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 de origen con licencia para que el licenciatario no tenga que anunciar para la compañía a la que le compra el contenido. Por lo tanto, estoy eliminando su logotipo mientras mantengo todo lo demás. Debo señalar 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);
}
Daniel Byrne
fuente
2

Sé que esta es una pregunta muy antigua, sin embargo, ninguna respuesta proporciona el razonamiento adecuado de por qué esto nunca se puede hacer. Si bien puede "hacer" lo que está buscando, 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 dan una manera de hacer esto con una etiqueta img que no usa el atributo src promueve el uso de código no válido.

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

Fuente: Validador W3

Geowil
fuente
2

O podrías hacer esto que encontré en la cosa interweb.

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

Así que efectivamente oculta la imagen y rellena el fondo. Oh, qué truco, 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 ahora, creé una plantilla de ramita de bloque de héroe

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

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

Alternativamente, puede usar JavaScript para hacer tal cosa.

Guillaume Flandre
fuente
1

Usando CSS, no se puede hacer. Pero, si está utilizando JQuery, algo así hará el truco:

$("img.myClass").attr("src", "http://somwhere");
Veera
fuente
en realidad, puede)) ver la respuesta a esta misma pregunta aquí: stackoverflow.com/questions/2182716/…
mikhail-t
1

Puedes convertirlo con JS:

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

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

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

    <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")"/>

Tschlegel
fuente
0

Yo agregaría esto: la imagen de fondo también podría posicionarse con background-position: x y;(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; 
  (..)
} 
(...)
Juan
fuente
0

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 durante unos días y quería saber cómo hacerlo. Descubrí el fondo y luego pon 2 y 2 juntos. ¡Esto funciona al 100%, lo comprobé, si no, asegúrate de completar las cosas necesarias! ¡Necesitamos especificar la altura, porque sin ella no habría nada! Dejaré este shell básico que puede 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");
}

PD Sí, soy un usuario de Linux;)

Z_Doctor
fuente
0

Cualquier método basado en backgroundo background-imagees probable que falle cuando el usuario imprime el documento con "imprimir colores e imágenes de fondo " desactivado. Que es, por desgracia, el valor predeterminado típico del navegador.

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

Simon Rozman
fuente
0

Cargando IMG src desde la definición de CSS, usando propiedades modernas de CSS

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
Expandir fragmento

  • la srcdefinición vacía en un <IMG> activa el controlador onerror: función loadIMG
  • La función loadIMG calcula el valor CSS
  • quita todos los caracteres ilegales
  • establece el IMG.src
  • cuando el CSS cambia, la imagen NO se actualiza. Tienes que llamar a loadIMG nuevamente

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Respuestas SO relacionadas: WCPROPS

Danny '365CSI' Engelman
fuente
-2

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>
Max
fuente
El OP está buscando específicamente limpiar su marcado HTML con una solución CSS. Esta respuesta solo desordenaría aún más el marcado.
webaholik el