Google Google の CSS 前景画像結合テクノロジー

前回の記事では背景画像を結合する方法を紹介しました。ただし、背景画像だけでなく、前景画像も結合できます。

Google 検索結果ページで、ロゴ アイコンを右クリックして名前を付けて保存すると、単純な Google ロゴではなく、複雑なパッチワーク画像であることがわかります。


検索ページのソース コードを表示します。コードのロゴ部分は次のとおりです。


コードの CSS 部分は次のとおりです。


上記のコードを分析すると、CSS の id=logo を持つ style 親要素は相対位置を採用し、幅と高さを定義し、overflow:hidden を使用してオーバーフロー部分を非表示にしているのに対し、img 要素は left と top を使用した絶対位置を採用していることがわかります。画像の位置調整用。これは背景画像の位置と一致します。