ウェブページ上に表示する画像に対して、指定の色で半透明カラーフィルタを掛けたような効果を出す方法を解説してみます。フィルタと言ってもIEの独自拡張ではなく、CSS3で透明度を指定できるopacityプロパティと、ボックスの背景色を活用するだけの簡単テクニックです。スクリプトは必要ありません。例えば下記のような感じで、1枚の写真に様々な色の半透明カラーフィルタっぽい効果を加えられます。記述量はほんの少しで済むので、ページを重くすることもなく気軽に使えます。
元々の写真は、下記の川の写真です。
以下に、様々な色での半透明カラーフィルタ効果の表示例と、それを実現するHTML・CSSソースを列挙してみます。記述量は少ないので、とても簡単です。
目次：
- 青色フィルタ(40%・20%)の表示例と、その効果の作り方
- 赤色フィルタ(40%・20%)の表示例とソース
- 黄色フィルタ(40%・20%)の表示例とソース
- 緑色フィルタ(40%・20%)の表示例とソース
- 紫色フィルタ(40%・20%)の表示例とソース
- 黒色フィルタ(40%・20%)の表示例とソース
- 白色フィルタ(40%・20%)の表示例とソース
- 橙色フィルタ(40%・20%)の表示例とソース
- ライム色フィルタ(40%・20%)の表示例とソース
- 空色フィルタ(40%・20%)の表示例とソース
- フィルタを掛ける濃さ(割合)は、数値で自由に指定可能(10%～90%)
青色フィルタ(40%・20%)の表示例と、その効果の作り方
まずは、青色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して青色を40％・20％ほど掛けた感じの効果を指定したところです。元の画像が青緑っぽいので単独では効果が分かりにくいですが(^_^;)、先の標準状態の画像と比較すれば、画像全体が青色っぽくなっていることが分かりやすいでしょう。
これを実現するには、まずはHTMLソースを以下のように書いておきます。単にp要素の中にimg要素を入れているだけです。ただ、後からCSSで装飾するためにclass名を付加しています。
<p class="colorfilter-base"> <img src="/css/images/summerriver.jpg" alt="カラーフィルタ効果の対象画像" class="colorfilter-image"> </p>
次にCSSソースを以下のように記述します。
.colorfilter-base {
background-color: blue; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定(※) */
display: block;
}
まず、外側のボックス(.colorfilter-base)に対して「半透明カラーフィルタ」にしたい色を「背景色」として指定しています。ここでは青色(blue)を使っているので、background-colorプロパティに値「blue」を指定しています。なお、「display: inline-block;」は単にボックスを横方向に並べられるようにしているだけなので、必須ではありません。
次に、内側の画像(.colorfilter-image)に対して「カラーフィルタの濃さ」を指定します。opacityは「不透明度」を0～1の範囲で指定できるCSS3のプロパティです。ここでは値に「0.6」を指定しているので、「60%不透明(＝40％ほど背景が透過する)」ということになります。つまり、40％の濃さでカラーフィルタ効果を出すという意味になるわけです。「20％の濃さ」にしたければ「0.8」を指定します。なお、「display: block;」は画像を外側のボックスにぴったりくっつけるために必要です。ここでは深く考えずにこのまま書いて下さい。(^_^;)
以上です。記述量は短くて簡単です。
さらに、他の色の場合の表示例と記述ソースを以下に紹介していきます。
赤色フィルタ(40%・20%)の表示例とソース
赤色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して赤色を40％・20％ほど掛けた感じの効果を指定したところです。
上記のカラーフィルタ効果を実現するには、まずはHTMLソースを以下のように書きます。(構造は先とまったく同じなので説明は省きます。)
<p class="colorfilter-base"> <img src="/css/images/summerriver.jpg" alt="カラーフィルタ効果の対象画像" class="colorfilter-image"> </p>
次にCSSソースを以下のように記述します。
.colorfilter-base {
background-color: red; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
2行目でカラーフィルタ効果の色として「赤色(red)」を指定しているほかは、先の例とまったく同じソースです。
このように、外側のボックスの背景色(background-colorプロパティの色)を変更するだけで、簡単に半透明カラーフィルタ効果の色を変化させられます。
黄色フィルタ(40%・20%)の表示例とソース
黄色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して黄色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: yellow; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を黄色(yellow)にしただけです。
緑色フィルタ(40%・20%)の表示例とソース
緑色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して緑色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: green; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を緑色(green)にしただけです。
紫色フィルタ(40%・20%)の表示例とソース
紫色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して紫色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: purple; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を紫色(purple)にしただけです。
黒色フィルタ(40%・20%)の表示例とソース
黒色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して黒色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: black; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を黒色(black)にしただけです。黒色の場合は、半透明カラーフィルタ効果というよりは「画像を暗くする効果」と言った方が良いかも知れませんね。
白色フィルタ(40%・20%)の表示例とソース
白色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して白色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: white; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を白色(white)にしただけです。白色の場合は、半透明カラーフィルタ効果というよりは「画像を明るくする効果」と言った方が良いかも知れません。
橙色フィルタ(40%・20%)の表示例とソース
橙色のフィルタを加えた場合の表示例です。それぞれ元の画像に対して橙色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: orange; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色をオレンジ色(orange)にしただけです。
ライム色フィルタ(40%・20%)の表示例とソース
ライム色のフィルタを加えた場合の表示例です。それぞれ元の画像に対してライム色を40％・20％ほど掛けた感じの効果を指定したところです。
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: lime; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色をライム色(lime)にしただけです。
空色フィルタ(40%・20%)の表示例とソース
空色(水色)のフィルタを加えた場合の表示例です。それぞれ元の画像に対して空色を40％・20％ほど掛けた感じの効果を指定したところです。（これはちょっと、元の画像の色がそもそも水色系なので、効果の度合いが分かりにくいですね。^^;）
HTMLソースは先とまったく同じなので省略します。CSSソースは以下のように記述します。
.colorfilter-base {
background-color: skyblue; /* カラーフィルタ効果の色を指定 */
display: inline-block; /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
opacity: 0.6; /* カラーフィルタ効果の度合いを指定 */
display: block;
}
単に外側のボックスの背景色を空色(skyblue)にしただけです。
フィルタを掛ける濃さ(割合)は、数値で自由に指定可能(10%～90%)
もはや説明は不要かも知れませんが、この半透明カラーフィルタ効果の濃さは、これまでにご紹介したような「20％」と「40％」だけではなく、下記のように自由な濃さを指定できます。
上記は、opacityプロパティの値を0.9から0.1まで（0.1ずつ減らして）変化させた例です。これは、背景色の透過割合が10％から90％に（10％ずつ）変化するのと同じ意味ですから、つまり「カラーフィルタ効果が10％ずつ増える」例ということになります。
というわけで、任意の画像に指定色の半透明フィルタを掛けたように見せるCSSの記述方法でした。
かなり短いソースだけで簡単に使えます。opacityプロパティはCSS3のプロパティですが、大半のブラウザで問題なく使えます。IEの場合はIE9からサポートされましたが、たとえopacityプロパティが使えないほど古いブラウザで閲覧されたとしても、単に「半透明にならない」というだけのことで、画像そのものはちゃんと見えます。なので、気軽に使って何も問題ないでしょう。
■関連記事：
- テキストの背景色を半透明にしつつ、文字色は不透明にするCSS
- マウスが載ったときだけ画像を半透明にする方法
- 背景画像を描画領域の面積ぴったりに自動で合わせる方法
- 蛍光ペンでマーキングした表示効果を作る
- RGBに透明度を加えて色を指定できるRGBAの書き方
《2016/05/07 11:44 初版公開》