CSS tecnología de imagen de mosaico

imagen dividida

Acoplar la imagen es una colección de imágenes individuales.

Hay muchas imágenes en la página pueden tardar mucho tiempo en cargar y genera múltiples peticiones al servidor.

Utilice una división servidor de imágenes se reducirá el número de solicitudes y ahorrar ancho de banda.

Dividir la imagen - ejemplo sencillo

En lugar de utilizar tres imágenes separadas, ya que usamos esta imagen única ( "img_navsprites.gif"):

Con CSS, podemos mostrar sólo una parte de la imagen que necesitamos.

En el ejemplo siguiente muestra una parte de la CSS especificado "img_navsprites.gif" imagen:

ejemplos de análisis:

• <Img class = "casa" src = "img_trans.gif" /> - porque no pueden estar vacíos, atributo src define sólo una pequeña imagen transparente. La imagen que se muestra será especificamos en las imágenes de fondo de CSS
• Ancho: 46px; altura: 44px; - se define parte de la imagen que usamos
• background: url (img_navsprites.gif) 0 0; - la imagen de fondo personalizado y su posición (0px izquierda, arriba 0px)

Esto se hace usando una imagen dividida la manera más fácil, y ahora se utiliza vínculos y efectos activables.

Acoplar la imagen - para crear una lista de navegación

Queremos utilizar la imagen de división ( "img_navsprites.gif"), para crear una lista de navegación.

Vamos a utilizar una lista de HTML, ya que puede estar relacionado, y también es compatible con una imagen de fondo:

ejemplos de análisis:

• #navlist {position: relative;} - posición se establece el posicionamiento relativo, permite el posicionamiento absoluto en el interior
• li #navlist {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margen y el relleno se establece en 0, se elimina el estilo de lista, todos los elementos de la lista son el posicionamiento absoluto
• #navlist li, un #navlist {height: 44px; display: block;} - la altura de todas las imágenes es 44px

Ahora cada parte específica de posicionamiento y estilo:

• #home {left: 0px; anchura: 46px;} - situado a la izquierda, y la forma en que el ancho de la imagen es de 46 píxeles
• #home {background: url (img_navsprites.gif) 0 0;} - imagen de fondo personalizada y su posición (a la izquierda 0px, superior 0px)
• #prev {left: 63px; anchura: 43px;} - en la 63px derecho de posicionamiento (46 píxeles de ancho #home + algo más de espacio entre los elementos), un ancho de 43px.
• #prev {background: url ( 'img_navsprites.gif') -47px 0;} - imagen de fondo personalizado en la 47px derecha (#home divisores de 46 píxeles de ancho + 1 px)
• #next {left: 129px; anchura: 43px;} - 129px a la posición correcta (#prev 63px + ancho + #prev es 43px espacio restante), el ancho es de 43px.
• #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - imagen de fondo personalizado en la 91px derecha (+ 46 píxeles #home 1px línea divisoria + # prev ancho de 43px + 1px divisores)

Acoplar la imagen s - coloque el efecto

Ahora, queremos que nuestra lista de navegación para añadir un efecto de vuelo estacionario.

	: El selector de efectos vuelo estacionario para moverte sobre la visualización de elementos selector Tip :: vuelo estacionario se puede aplicar a todos los elementos.

Nuestra nueva imagen ( "img_navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes:

Debido a que esta es una sola imagen, en lugar de seis archivo de imagen independiente cuando un usuario permanece en la imagen no retrasar la carga.

Añadimos efectos de activación suman sólo tres líneas de código:

ejemplos de análisis:

• Dado que el elemento de la lista contiene un enlace, podemos utilizar el: hover pseudo-clase
• #home a: hover {background: url transparente (img_navsprites_hover.gif) 0 -45px;} - Para las tres imágenes de la libración especificamos la misma posición de fondo, pero luego por 45 píxeles cada una