PNGファイルでカラーアニメーション

あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。
他に背景色を使う可能性としては、画像の透過部分から背景色を透かして見せたい場合などでしょう。実際この方法ならば、何でも自分の好きな形を作って後ろ側に背景色を設定すればよいのです。すなわち作成した形の色をCSSで好きなように変えることが出来るのです。更に言えば、CSSでコントロールするのですから、CSSで出来ることなら何でも出来ると言うことです。アニメーションにすることだって出来ます。

まずは画像の作成ですが、透過させない部分はソリッドカラーで残します。以下のサンプルの場合は白ですね。そして背景色で「形作りたい」個所を透過させます。フォトショップで見るとこんな感じです：

そこにマークアップを加えていきます：

<img src="images/marilyn.png" alt="">

そして背景色を付けます：

img { background: red; }

それから何色かが順番に繰り返し表示されるようなアニメーションを作ります。シンタックスは2つとも必要です：

@-webkit-keyframes super-rainbow {
    0%   { background: red; }
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}
@-moz-keyframes super-rainbow {
    0%   { background: red; }
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

最後にアニメーションシンタックスを画像に適用させます：

img {
     background: red;
     -webkit-animation: super-rainbow 15s infinite alternate linear;
     -moz-animation: super-rainbow 15s infinite alternate linear;
}

これが完成図です！デモページで実際のアニメーションを確認してみてください。おまけでマウスオーバーすると色が変わる自転車の画像もつけておきます。