元ネタは、pologの「Googleの検索結果ページは画像を一つしか読み込んでいない 」から。 う~ん。確かに凄い。 このように一つの画像から、ポジションを切って特定の場所だけを取り出すことが可能とは知らなかった。 どうやらCSSで出来るようなので、実際にやってみました。 例えば・・・ という4色に色分けした画像があって、これを白い領域だけ表示、赤い領域だけ表示と言うような事をCSSを使って実装してみたいと思います。 画像の大きさは全体で、100px × 100pxになっており、それぞれの色分けされた領域は、50px × 50pxの大きさになっています。 CSSはこんな感じ。 <html> <head> <style><!-- div.logo_white { background:url(./logo.gif) no-repeat; overflow:hidden; height:50p
![『Googleの検索結果ページは画像を一つしか読み込んでいない ( ・・・を実装する)』](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e25b60a116cd646b6ea35a97f21d87e8bb3473/height=288;version=1;width=512/https%3A%2F%2Fstat.profile.ameba.jp%2Fprofile_images%2F20180307%2F17%2F6d%2F98%2Fj%2Fo01440176p_1520412760963_99ynx.jpg)