In früheren Artikeln haben wir die Methode zum Zusammenführen von Hintergrundbildern vorgestellt. Es können aber nicht nur Hintergrundbilder zusammengeführt werden, sondern auch Vordergrundbilder.
Klicken Sie auf der Google-Suchergebnisseite mit der rechten Maustaste auf das Logo-Symbol und speichern Sie es unter. Sie werden feststellen, dass es sich nicht um ein einfaches Google-Logo, sondern um ein komplexes Patchwork-Bild handelt:
Sehen Sie sich den Quellcode der Suchseite an. Der Logo-Teil des Codes lautet wie folgt:
Beispiel-Quellcode
[www.downcodes.com] Der CSS-Teil des Codes lautet wie folgt:
Beispiel-Quellcode
[www.downcodes.com] #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
Die Analyse des obigen Codes zeigt, dass das übergeordnete Element style mit id=logo in CSS eine relative Positionierung annimmt, die Breite und Höhe definiert und overflow:hidden verwendet, um den Überlaufteil auszublenden, während das img-Element eine absolute Positionierung annimmt, indem es left und top verwendet zur Bildpositionierung, die mit der Positionierung des Hintergrundbilds übereinstimmt.
