En artículos anteriores, presentamos el método de fusionar imágenes de fondo. Pero no sólo se pueden fusionar imágenes de fondo, sino que también se pueden fusionar imágenes de primer plano.
En la página de resultados de búsqueda de Google, haga clic con el botón derecho en el ícono del logotipo y guárdelo como; podrá encontrar que no es un simple logotipo de Google, sino una compleja imagen de mosaico:
Vea el código fuente de la página de búsqueda. La parte del logotipo del código es la siguiente:
Código fuente de ejemplo
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
La parte CSS del código es la siguiente:
Código fuente de ejemplo
[www.downcodes.com] #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{borde:ninguno;posición:absoluta;izquierda:-0px;arriba:-26px}
El análisis del código anterior muestra que el elemento principal de estilo con id=logo en CSS adopta un posicionamiento relativo, define el ancho y el alto, y usa overflow:hidden para ocultar la parte de desbordamiento, mientras que el elemento img adopta un posicionamiento absoluto, usando left y top; para el posicionamiento de la imagen, que es consistente con el posicionamiento de la imagen de fondo.
