【CSS】filter:blurの使い方!CSSだけで画像にぼかしをかける方法は?

cssで画像をぼかす方法

この記事では、CSSだけで画像にぼかし表現をかける方法を紹介します。

CSSで画像にぼかしをかけるには「filter:blur()」を使います。
記事では「filter:blur()」の使い方や実際にぼかしをかけた画像のイメージを紹介します。

それではさっそく見ていきましょう!

この記事の内容

filter:blurを使ってCSSで画像にぼかしをかける

それではさっそく、CSSを使って簡単に画像にぼかしをかける方法を解説していきます。

サンプルとして用意したのはこちらの外国の街並みの画像。
この画像をCSSを使ってぼかしをかけます。

外国の街並み

 

まず、htmlコードはこちら。
分かりやすく「bokashi」というclassをつけています。

<img class="bokashi" src="/xxx.jpg">

 

cssコードはこちら。

.bokashi {
  filter: blur(3px);
}

 

これで画像はこのとおりぼかしをかけたような感じになります。

外国の街並み

詳しい使い方を解説すると、
「blur(3px)」のように、()にぼかしの半径の長さを指定します。
上記のCSSの場合、半径3pxでぼかしているということになります。
この数値が大きくなればなるほど、ぼかしが強くなります。

【CSS】filter:blur()を使った画像のぼかしの注意点

CSSのfilter:blur()を使った画像ぼかしは、画像ファイルそのものにぼかし加工をしているわけではありません。

ぼかしフィルターを表面にかぶせただけ、という感じのイメージです。

画像ファイルそのものをブラウザで開いたりダウンロードしたりすれば、ぼかしのかかっていない画像を見ることができます。
なので、モザイクをかけるかわりに使うというような用途にはまったく向いていませんので注意してください。

【CSS】filter:blur()を使った画像のぼかしの使いみち

画像のぼかし表現は、使いみちとしてはある程度限られそうです。

おしゃれな使いみちとしては、背景画像をぼかして前面のオブジェクトを際立たせるというような表現などがありそうです。

あとは、表面的には隠しておいて、興味のある人にだけ見てもらいたい画像にfilter:blur()を使うという使いみちもあります。

例えばこんな感じ。

 

【閲覧注意】
怖い熊の画像です。見たい人だけクリックしてね!

 

熊

 

アイデア次第で、クイズやネタ系のコンテンツなどで読者を楽しませる仕掛けとして使えそうですね。

CSS filterの関数一覧

「blur()」以外にもCSSのfilter関数はたくさんあります。

filter関数の一覧を紹介します。

grayscale()
画像をグレイスケールに変換する。%で指定。

contrast()
画像のコントラスト調整する。%で指定。100%が基準値。

blur()
画像をぼかす。pxやremで数値を指定。

brightness()
画像を明るさを調整する。%で指定。100%が基準値。

drop-shadow()
画像にドロップシャドウをつける。

hue-rotate()
画像の色相環を回転する。degで角度を指定。

invert()
画像の色を反転する。%で指定。

opacity()
画像を半透明にする。%で指定。

saturate()
画像の彩度を調整する。%で指定。

sepia()
画像をセピア色にする。%で指定。

これらの関数は単独で使ってもいいですし、
「filter: grayscale(100%) contrast(150%);」というふうに組み合わせて使うこともできます。

各関数については、機会があれば別の記事で詳しく紹介します。

おわりに

以上、CSSだけで簡単に画像にぼかしをかける方法を紹介しました。

CSSのfilter機能をうまく使いこなせば、Photoshopなどの画像編集ソフトで加工するのと同じような表現も簡単にできるようになります。

ぜひ参考にしてみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)