Day: August 23, 2011

あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。 他に背景色を使う可能性としては、画像の透過部分から背景色を透かして見せたい場合などでしょう。実際この方法ならば、何でも自分の好きな形を作って後ろ側に背景色を設定すればよいのです。すなわち作成した形の色をCSSで好きなように変えることが出来るのです。更に言えば、CSSでコントロールするのですから、CSSで出来ることなら何でも出来ると言うことです。アニメーションにすることだって出来ます。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ まずは画像の作成ですが、透過させない部分はソリッドカラーで残します。以下のサンプルの場合は白ですね。そして背景色で「形作りたい」個所を透過させます。フォトショップで見るとこんな感じです： そこにマークアップを加えていきます： そして背景色を付けます： それから何色かが順番に繰り返し表示されるようなアニメーションを作ります。シンタックスは2つとも必要です： 最後にアニメーションシンタックスを画像に適用させます： これが完成図です！デモページで実際のアニメーションを確認してみてください。おまけでマウスオーバーすると色が変わる自転車の画像もつけておきます。