Em artigos anteriores, apresentamos o método de mesclagem de imagens de fundo. Mas não apenas as imagens de fundo podem ser mescladas, mas também as imagens de primeiro plano.
Na página de resultados de pesquisa do Google, clique com o botão direito no ícone do logotipo e salve-o como, você descobrirá que não é um simples logotipo do Google, mas uma imagem complexa de retalhos:
Veja o código-fonte da página de pesquisa A parte do logotipo é a seguinte:
Exemplo de código-fonte
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
A parte CSS do código é a seguinte:
Exemplo de código-fonte
[www.downcodes.com] #logo{display:bloco;overflow:oculto;posição:relativa;largura:150px;altura:52px;margem:14px 0 7px}
#logo img{borda:nenhuma;posição:absoluta;esquerda:-0px;topo:-26px}
A análise do código acima mostra que o elemento pai de estilo com id=logo em CSS adota posicionamento relativo, define a largura e a altura e usa overflow:hidden para ocultar a parte overflow enquanto o elemento img adota posicionamento absoluto, usando left e top; para posicionamento da imagem, que é consistente com o posicionamento da imagem de fundo.
