にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像に指定色の半透明フィルタを掛けたように見せるCSS [CSS3,イメージ,]

ウェブページ上に表示する画像に対して、指定の色で半透明カラーフィルタを掛けたような効果を出す方法を解説してみます。フィルタと言っても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%」だけではなく、下記のように自由な濃さを指定できます。

カラーフィルタ効果10%付き画像

カラーフィルタ効果20%付き画像

カラーフィルタ効果30%付き画像

カラーフィルタ効果40%付き画像

カラーフィルタ効果50%付き画像

カラーフィルタ効果60%付き画像

カラーフィルタ効果70%付き画像

カラーフィルタ効果80%付き画像

カラーフィルタ効果90%付き画像

上記は、opacityプロパティの値を0.9から0.1まで(0.1ずつ減らして)変化させた例です。これは、背景色の透過割合が10%から90%に(10%ずつ)変化するのと同じ意味ですから、つまり「カラーフィルタ効果が10%ずつ増える」例ということになります。

というわけで、任意の画像に指定色の半透明フィルタを掛けたように見せるCSSの記述方法でした。
かなり短いソースだけで簡単に使えます。opacityプロパティはCSS3のプロパティですが、大半のブラウザで問題なく使えます。IEの場合はIE9からサポートされましたが、たとえopacityプロパティが使えないほど古いブラウザで閲覧されたとしても、単に「半透明にならない」というだけのことで、画像そのものはちゃんと見えます。なので、気軽に使って何も問題ないでしょう。

■関連記事:

《2016/05/07 11:44 初版公開》

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連書籍など

--- 当サイト内を検索 ---