Dans les articles précédents, nous avons présenté la méthode de fusion des images d’arrière-plan. Mais non seulement les images d’arrière-plan peuvent être fusionnées, mais les images de premier plan peuvent également être fusionnées.
Dans la page des résultats de recherche Google, cliquez avec le bouton droit sur l'icône du logo et enregistrez-le sous, vous constaterez qu'il ne s'agit pas d'un simple logo Google, mais d'une image patchwork complexe :
Afficher le code source de la page de recherche. La partie Logo du code est la suivante :
Exemple de code source
[www.downcodes.com] La partie CSS du code est la suivante :
Exemple de code source
[www.downcodes.com] #logo{affichage:bloc;débordement:caché;position:relative;largeur:150px;hauteur:52px;marge:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
L'analyse du code ci-dessus montre que l'élément parent style avec id=logo en CSS adopte un positionnement relatif, définit la largeur et la hauteur et utilise overflow:hidden pour masquer la partie de débordement tandis que l'élément img adopte un positionnement absolu, en utilisant left et top ; pour le positionnement de l'image, qui est cohérent avec le positionnement de l'image d'arrière-plan.
