¿Es posible utilizar sprites CSS para imágenes "en primer plano", es decir, imágenes en las que se supone que los usuarios deben hacer clic, interactuar e incluso imprimir?CSS Sprites: ¿no solo para imágenes de fondo?
En lugar de utilizar la propiedad CSS background-image. ¿Qué usarías?
Puede usar una etiqueta estándar <img /> y ponerla en un contenedor (como <div />) con una altura/ancho limitado. Luego use posicionamiento relativo o márgenes negativos para controlar la posición de la imagen.
Puede hacer esto, pero tiene que usar imágenes de fondo para los sprites ya que tiene que poder establecer la posición. Esto se puede usar para enlaces o lo que quieras. Mira Googles sprite, lo utilizan para allí los botones en iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Puedes controlar la posición de cualquier elemento usando 'position' en CSS en combinación con' top, left, right, bottom'. Alternativamente, puede usar márgenes negativos. –
Nunca dije que no pudieras controlar la posición en ningún elemento. Sin embargo, puede hacer que funcione con imágenes de fondo en cualquier elemento. –
Bueno, por supuesto que puede, pero específicamente preguntan cómo hacerlo * sin * imágenes de fondo. –
Usted puede hacer esto con menos CSS como esto:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Lo que tiene la clase class="myClass" tendrá sólo la imagen en ella, nada más. Puede ser <a><input> o <div> normal, lo que usted quiera.
Es una imagen de fondo ... pero es el elemento que está mirando, nada está delante de ese fondo. El hecho de que use background-image para la propiedad no significa que no sea un elemento en primer plano ... como un botón en el que puede hacer clic. Puede hacerlo así:
<input type="button" class="myClass" />
Esa es la solución basada en imágenes de fondo, no importa cómo lo expliques. La pregunta explícitamente pide algo más. Y entiendo por qué: obviamente hay una diferencia * fundamental * entre las imágenes que forman parte del contenido del documento y las que forman parte de su diseño y estilo. – amn
Un requisito principal que no puede ser manejado por imágenes de fondo es para ARIA. Todos los requisitos de ARIA rechazarán el uso de imágenes de fondo para usos significativos, de navegación y otros usos "informativos" que un lector de pantalla debe interpretar en nombre de un usuario con una discapacidad. Poder intercambiar una declaración de CSS de imagen de fondo por una etiqueta de img y un etiquetado de ARIA siempre que sea necesario es una característica fundamental en el entorno de desarrollo regulado actual.
La respuesta a la pregunta original es sí! Es posible usar la imagen que se muestra en una declaración de fondo css. Pero debe abrir la imagen de sprite en un editor de imágenes y seleccionar la parte que representa el sprite que desea y guardarla como una imagen separada y hacer referencia a ella en una etiqueta img.
El desafío es que a menudo, estas situaciones surgen en una biblioteca de control preconstruida. Encontrar y alterar el código en la biblioteca que selecciona y muestra la imagen de fondo es un poco difícil, ¡cambiar el código es difícil!
Genio, ¡gracias! – Summer
Esto es IMO exagerado, usted puede simplemente configurar la entrada para mostrar el bloque y eliminar el div/envoltorio de la ecuación todo junto, es un enfoque mucho más simple. –
@Nick Eso no tiene ningún sentido. ¿Cómo aplicarías un sprite sin usar el contenedor? –