カメレオンアイコン

私は趣味でサイトを作ってみたりＢｌｏｇを始めてみたりと経験は非常に浅いのですが、海外のサイトを巡っていてたまたまＣＳＳのテクニックを発見したので皆さんにご紹介します。
ＣＳＳと透過ＧＩＦ画像を組み合わせてカメレオンのようにアイコン画像の背景色などを簡単に変更できるとても便利なＣＳＳTipです。
今までのようにアイコン画像をサイトカラーに合わせてそのつど画像編集ソフトで変更するのは作業としては単純ですが、サイトを運営される方にとってはとっても煩わしい作業ですよね。で、そんな時スタイルシートを使えば一発で解決できたのです。再利用も簡単にできるのでホンとにお勧めです。皆さんもお試しあれ。

サンプル

（画像は矢印部分を白色、回りの背景を透過にした画像を作製しています）

ＣＳＳ例
1) 個別にアイコンの背景色を変える場合：

<img src="../xxx/xxx.gif" style="background:#336699">

2) 複数のアイコンを同時に変更する場合：
CSS（ヘッダ内のCSS又は外部CSSファイルに追加）

.Chameleon img {
background: #336699
}

タグ（背景色を統一したい画像に指定してください）

<div class="Chameleon">
<img src="../xxx/xxx.gif">
</div>