CSS - Sprites como imágenes de fondo

Tengo una aplicación web cuyo rendimiento estoy trabajando para mejorar. En un intento de hacer esto, decidí usar sprites css. He colocado todas mis imágenes en un archivo .png llamado images.png.CSS - Sprites como imágenes de fondo

Los sprites CSS han funcionado bien para todas las clases CSS que solo muestran una imagen una vez. Sin embargo, varias de mis imágenes deben repetirse. Por ejemplo, tengo una imagen de banner.png utilizada para el fondo del banner. Cada vez que configuro la propiedad background-repeat, parece que la imagen no se repite. Para mostrar mis definiciones CSS, aquí están:

Before CSS Sprites 
------------------ 
.ghwc { 
    background-image: url(/images/layout/banner.png); 
    background-repeat:repeat-x; 
    color:White; 
    width:300px; 
} 

After CSS Sprites 
----------------- 
.ghwc { 
    background-image: url(/images/images.png); 
    background-repeat:repeat-x; 
    color:White; 
    background-position:60px 319px; 
    width:300px; 
}

Mi pregunta es, ¿cómo se utiliza sprites CSS para imágenes repetidas como fondos?

Gracias,

Fuente

2010-05-18 user208662

Mi pregunta es, ¿cómo se utiliza sprites CSS para imágenes repetidas como fondos?

Usted no lo hace. Eso simplemente no es posible usando CSS sprites. Para hacerlo, debe poder especificar un área de la imagen que se va a repetir, y que yo sepa que es imposible tanto en CSS 2 como en 3.

Fuente

2010-05-18 20:23:39

Probablemente podrías salirte con imágenes que solo se repiten en una dirección , pero realmente no parece que valga la pena el esfuerzo. Necesitamos soporte para imágenes empaquetadas ... –

@Matti yup, o respuestas de varias partes para el caso. –

puedes crear un grupo de divs con el fondo sprited como el bg, establecer el ancho y la altura, y luego tener un div completamente posicionado en la parte superior: D, pero si lo haces, estoy bastante seguro de que en algún lugar es un unicornio asesinado – Jason

Asumiendo su imagen de fondo (images.png) muestra en absoluto, su código debería funcionar. Si desea que esto se visualice correctamente en Opera y Firefox, deberá agregar

background-attachment: fixed;

Editar: Me acabo de dar cuenta de que probablemente esté hablando de un conjunto de coordenadas específico en una imagen "sprite" compuesta por varias "imágenes". No va a conseguir que un área particular de una imagen se repita así. Recorta la imagen al tamaño que te preocupa, luego utiliza el código que tienes.

Fuente

2010-05-18 20:29:06

No creo que esa sea su pregunta, es que ahora quiere usar la estructura como imagen de fondo, lo cual es imposible en la medida de lo posible. ver. –

Sí, editado para reflejar eso. No me di cuenta de que era de lo que estaba hablando al principio. –

Puede hacer esto si solo tiene background-repeat:repeat-x; como en el ejemplo, solo necesita hacer que todos los fondos contenidos en el contenedor de imágenes sprite tengan el mismo ancho y colocar el archivo de imagen sprite verticalmente. Entonces, la propiedad de posición de fondo siempre tendrá la primera posición x en 0 y el sprite se ubicará en la segunda posición y (por ejemplo, background-position:0 0; background-position:0 -100px; background-position:0 -200px;, etc.). Es posible que esto no funcione en todos los navegadores si no puede especificar la altura exacta y establecer overflow:hidden.

Fuente

2010-05-18 20:34:31 mVChr

Si desea utilizar repeat-x, no debe poner varias imágenes una al lado de la otra en su sprite ya que todo el sprite está duplicado en dirección x (como ya ha notado). Pero puedes ponerlos en una línea vertical. (A la inversa si quieres usar repeat-y. No hay nada como "background-crop" hasta ahora (tal vez en CSS4?;))

Fuente

2013-01-22 14:32:24

CSS - Sprites como imágenes de fondo

Respuesta

Cuestiones relacionadas