CSS: muestra un icono en particular de un archivo de imagen

¿Cómo se configura la propiedad CSS background-image para cargar un icono en particular de una imagen más grande?CSS: muestra un icono en particular de un archivo de imagen

Por ejemplo, jQuery UI temas su widget Dialog utilizando el siguiente archivo de imagen PNG: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, que codifica un grupo de iconos en el mismo. Luego, como se muestra en http://docs.jquery.com/UI/Dialog, la palanca de ajuste de tamaño inferior derecha carga el último ícono de PNG.

Usando Firebug puedo ver un montón de propiedades de CSS como ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se aplicadas que se refieren a url(ui-icons.xx.png), pero nada sobre seleccionar un icono en particular.

Fuente

2009-09-30 Jerry Chong

En realidad es una técnica de sprite de CSS.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

uso

background-position

propiedad

Si una imagen de fondo ha sido especificado, esta propiedad especifica su posición inicial . Si solo se especifica un valor , se supone que el segundo valor es para ser 'centro'. Si al menos un valor no es una palabra clave, entonces el primer valor representa la posición horizontal y el segundo representa la posición vertical . Se permiten los valores negativos y .

Por ejemplo: propiedad CSS

body { background: url("banner.jpeg") right top } /* 100% 0% */ 
body { background: url("banner.jpeg") top center } /* 50% 0% */ 
body { background: url("banner.jpeg") center }  /* 50% 50% */ 
body { background: url("banner.jpeg") bottom }  /* 50% 100% */

El fondo es un propiedad abreviada para establecer la propiedad funcional individual valora en un solo lugar en la hoja de estilo. fondo se puede utilizar para establecer los valores para uno o más de: color de fondo, imagen de fondo, posición de fondo, fondo-repetir, fondo-adjunto.

.PosBG { 
    background-image: url("logo.png"); 
    background-attachment: fixed; 
    background-position: 100% 100%; 
    background-repeat: no-repeat; 
}

Fuente

2009-09-30 05:09:45 rahul

algo como lo siguiente:

background-image: url('yourimage.png'); 
background-repeat: no-repeat; 
background-position: 25px 0px;

ver http://www.w3schools.com/css/pr_background-position.asp para más información sobre background-position

Fuente

2009-09-30 05:10:05

Gracias por compartir –

El enlace de arriba ahora está roto. Use esto en su lugar: http://www.w3schools.com/css/css_image_sprites.asp – Javide

@javid Acabo de leer su útil enlace de trabajo pero en el que están diciendo que la tecnología sprite es útil y también estoy de acuerdo con w3school. pero ¿qué pasa con esta afirmación? "Una página web con muchas imágenes puede tardar mucho tiempo en cargarse y genera múltiples solicitudes de servidor". para separar imágenes de la forma en que debe llamar a la imagen varias veces utilizando la propiedad url. – user2826111

Under the covers...

Los elementos de anclaje están fijados tamaño y el fondo se establece en la imagen que contiene todos los iconos, pero la propiedad de posición de fondo es específica ed para cambiar la imagen de fondo de modo que solo se muestre el ícono deseado de la imagen.

Eche un vistazo a A List Apart's explaination of the technique.

Fuente

2009-09-30 05:16:03 MyItchyChin

Gracias realmente me ayudó ...... – User

CSS: muestra un icono en particular de un archivo de imagen

Respuesta

Cuestiones relacionadas