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:
.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 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
- Cualquier contenido semántico o información estructural va en HTML.
- La información de estilo y presentación va en CSS.
- Para fines de SEO, no oculte imágenes significativas en CSS.
- Los gráficos de fondo generalmente se desactivan al imprimir.
- 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 .
- 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.
.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 <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 .