In previous articles, we introduced the method of merging background images. But not only background images can be merged, but foreground images can also be merged.
In the Google search results page, right-click the logo icon and save it as, you can find that it is not a simple Google Logo, but a complex patchwork image:
View the source code of the search page. The Logo part of the code is as follows:
Example Source Code
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
The CSS part of the code is as follows:
Example Source Code
[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}
Analysis of the above code shows that the style parent element with id=logo in CSS adopts relative positioning, defines the width and height, and uses overflow:hidden to hide the overflow part; while the img element adopts absolute positioning, using left and top for image positioning. , which is consistent with the positioning of the background image.
