¿En qué situaciones es más adecuado utilizar un HTML IMG etiqueta para mostrar una imagen, como contraposición a un CSS background-image, y vice-versa?
Los factores pueden incluir la accesibilidad, compatibilidad del navegador, contenidos dinámicos, o cualquier tipo de límites técnicos o de unos principios de usabilidad.
IMG si va a tener
la gente de impresión de su página y desea que la imagen se incluye por defecto.
-JayTee
IMG (con alt de texto) cuando la imagen tiene un importante significado semántico, como un icono de advertencia. Esto asegura que el significado de la imagen puede ser comunicada en todos los agentes de usuario, incluyendo lectores de pantalla.IMG si va a tener
la gente de impresión de su página y desea que la imagen se incluye por defecto.
-JayTee
IMG si usted confía en el navegador de escala para representar una imagen en proporción al tamaño del texto.IMG
para varios de superposición de imágenes en IE6.IMG con un z-index en el fin de
para estirar una imagen de fondo para rellenar la totalidad de su ventana.img en lugar de background-image drásticamente puede mejorar el rendimiento de animaciones sobre un fondo.background-image si va a tener
la gente de impresión de su página y usted no desea que la imagen que se incluye por defecto.
-JayTee
background-image si usted necesita para mejorar los tiempos de descarga, como
con CSS sprites.background-image si usted necesita para sólo una parte de la imagen sea visible, ya que con CSS sprites.background-image con background-size:cover con el fin de estirar una imagen de fondo para rellenar la totalidad de su ventana.
Es en blanco y negro decisión para mí. Si la imagen es parte del contenido, como un logotipo o un diagrama o persona (persona real, no de fotografía de stock de personas), a continuación, utilice la <img /> tag plus atributo alt. Para todo lo demás CSS con imágenes de fondo.
La otra vez el uso de CSS imágenes de fondo es cuando se hace de la imagen de sustitución de texto por ejemplo. los párrafos/headers.
Me sorprende que nadie ha mencionado todavía: las transiciones de la CSS.
Usted puede de forma nativa transición, divs'imagen de fondo:
#some_div {
background-image:url(image_1.jpg);
-webkit-transition:background-image 0.5s;
/* Other vendor-prefixed transition properties */
transition:background-image 0.5s;
}
#some_div:hover {
background-image:url(image_2.jpg);
}
Esto ahorra cualquier tipo de JavaScript o jQuery animación para difuminar un <img/>s' src.
Si usted tiene tu CSS en un archivo externo, es a menudo conveniente para mostrar una imagen que se usa con frecuencia en todo el sitio (como una imagen de cabecera) como una imagen de fondo, porque entonces usted tiene la flexibilidad para cambiar la imagen más tarde.
Por ejemplo, supongamos que tenemos el siguiente código HTML:
<div id="headerImage"></div>
...y CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(Images/headerImage.png) no-repeat;
}
Unos días más tarde, cambia la ubicación de la imagen. Todo lo que tienes que hacer es actualizar el CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(../resources/images/headerImage.png) no-repeat;
}
De lo contrario, tendría que actualizar la src atributo de la apropiada <img> etiquetas en todos los archivos HTML (suponiendo que usted no está utilizando un lenguaje de comandos del servidor o de la CMS para automatizar el proceso).
También las imágenes de fondo son útiles si usted no desea que el usuario será capaz de guardar la imagen (aunque nunca los he necesitado para hacer esto).
Steve
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.
