画像に指定色の半透明フィルタを掛けたように見せるCSSの書き方

ウェブページ上に表示する画像に対して、指定の色で半透明カラーフィルタを掛けたような効果を出す方法を解説してみます。フィルタと言ってもIEの独自拡張ではなく、CSS3で透明度を指定できるopacityプロパティと、ボックスの背景色を活用するだけの簡単テクニックです。スクリプトは必要ありません。例えば下記のような感じで、1枚の写真に様々な色の半透明カラーフィルタっぽい効果を加えられます。記述量はほんの少しで済むので、ページを重くすることもなく気軽に使えます。

元々の写真は、下記の川の写真です。

以下に、様々な色での半透明カラーフィルタ効果の表示例と、それを実現するHTML・CSSソースを列挙してみます。記述量は少ないので、とても簡単です。

青色フィルタ(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からサポートされましたからIE8以下では使えません。しかし、たとえopacityプロパティが使えないほど古いブラウザで閲覧されたとしても、単に「半透明にならない」というだけのことで、画像そのものはちゃんと見えます。なので、気軽に使って何も問題ないでしょう。(そもそも、もはやIE8以下の古いバージョンは気にしなくて良いでしょうけども。^^;)

なお、透明度を利用したCSSテクニックとしては、以下のような記事もありますのでぜひ併せてご参照下さい。

• テキストの背景色を半透明にしつつ、文字色は不透明にするCSS
• マウスが載ったときだけ画像を半透明にする方法
• RGBに透明度を加えて色を指定できるRGBAの書き方

(更新日：2017年07月05日)