いわゆる、かずー氏クラスタアイコンの作り方
Way to cover an image with another imageサンプルページへはこちらのリンクまたは画像をクリック！
私@wada811のアイコンが、
他の人のかずー氏クラスタアイコンのように
全体サイズになっていないのは
重ねるのが簡単すぎて
重ねたい画像が同じサイズの特殊事例にしか
対応できないように見えるため
あえて小さく重ねています。
方法としては6つもありました！
正直自分でも驚きです。
- background: absolute; で絶対配置で重ねる方法
- 背景画像を指定した div に img タグを置いて重ねる方法
- 2の方法を擬似要素 :after の content: url() で重ねる方法
- 3の方法で content ではなく背景画像に指定して重ねる方法
- CSS3 の複数画像の背景指定で重ねる方法
- Canvas で複数画像を読み込んで重ねる方法
background: absolute; で絶対配置で重ねる方法は安心安定の指定方法。
HTML の記述量が多くなるので繰り返しが多い部分には使いたくないが、ワンタイムのページでいちいち CSS ファイルを編集するのがめんどくさい時には便利。
背景画像を指定した div に img タグを置いて重ねる方法はプログラムで使いやすい。
背景画像をプログラムなどで差し替えたいときや、状態判定してカバー画像をかける、かけないというの場合分けなどで便利。
2の方法を擬似要素 :after の content: url() で重ねる方法は IE7 以下で使えない。
今回は transform: scale(); で無理やり画像を小さくしているのでIE8 で画像が小さくならなくて背景画像をはみ出てしまう。
使うときはちゃんとサイズの合った画像を使おう。
3の方法で content ではなく背景画像に指定して重ねる方法は IE8 以下で使えない。
CSS3 の background-size を使っているので IE8 以下は画像が小さくならなくて切れてしまう。使うときはちゃんとサイズの合った画像を使おう。
CSS3 の複数画像の背景指定で重ねる方法は IE8 以下で表示すらできない。
background-image が CSS3 で複数枚の画像を指定できるようになっている。この使い方では微妙だが、サイトの画像をコンポーネント化できるので微妙に違う画像が多い時は便利かも？
スマホなら background-image の複数画像指定をサポートしているはずなので
画像を色んな組み合わせで一つの画像として表示したいときに使えるかも。
キャッシュされればそれぞれ早くなりそうな気がする。
Canvas で複数画像を読み込んで重ねる方法は IE8 以下では使えない。
IE8 以下でも Canvas を使えるようにするライブラリもあるようだが完全ではないようです。参考: HTML5 CanvasをIEにも対応させる魔法excanvasの使い方 | DECONCEPTER
複数の画像を合成した画像を Data URI スキームで表現できるので
サンプルページにあるように Canvas で作った画像を画像タグで置換することもできる。
最後に
目的に合わせていろいろな方法を使いこなせるようになろう。Canvas を使って面白そうなことができるのでやってみたい。
@kazoo04のアイコン素材を使わせて頂きました。
この場を借りて感謝します。ありがとうございます。