WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

最近は写真がメインで目立つWEBサイトが多くなってきました。
ぼかした写真の上にテキストを載せたいけど画像の加工方法がわからない…
もしくはそのままの写真を使いたいという時にCSSだけで背景画像をぼかす方法を紹介します。

対応ブラウザ

この方法はsafariとChromeに対応しています。
残念ながらIEには対応していませんので別のIEでは別の見せ方にするか
画像自体を加工することになりそうです。
そして、このプロパティはvideoタグにも適用できるので応用できます。

ぼかす方法

背景いっぱいにbackground-imageを設定してテキストをpositionで真ん中にもってくるイメージで置きます。
HTMLはこのように3行書くだけで大丈夫です。

<div class="image_area">


タイトルテキスト

</div>

CSSは下記のようになります。

.image_area {
  background-attachment: fixed;
  background-image:url(画像パス);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100%;
}
.image_area::before {
  background: inherit;
  content: '';
  filter: blur(5px);
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.image_area p{
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

ぼかすのに必要なものは下記の部分になります。

filter: blur(5px);

ぼかし（Blur）フィルターは、色をにじませて枠の外側に広げています。
値が大きくなるほど、ぼかしの度合いが強くなります。このフィルターはpxでの指定のみとなります。

他にもできる画像加工filterプロパティ

明るさ

.image_area::before {
 filter: brightness(300%);
}

明るさについて、値を0％にすると、真っ黒になります。
また、100％でオリジナルの画像になります。上記の300％では画像が3倍の明るさになります。

コントラスト

.image_area::before {
 filter: contrast(0%);
}

コントラストは、画像のコントラストを調整します。CSSで画像の明るい部分と暗い部分の差を調整できます。
値を0％にするとグレー1色になります。コントラストを100％よりも値を大きくすると、画像のコントラストが大きくなります。

セピア

.image_area::before {
 filter: sepia(100%);
}

セピアは、古い写真のような表現ができます。
0％がオリジナル画像になり、100％で完全にセピアになります。

色相回転

.image_area::before {
 filter: hue-rotate(90deg);
}

色相回転は、画像のすべての色に色相の回転を適用します。
0degでは、画像は何も変わりません。360degで回転が一周し、それより大きい値の効果は一周目と同じ効果になります。

まとめ

Photoshopで画像加工することなく、CSSのみで画像の様々な表現ができるので簡単に加工ができます。
背景画像だけでなく普段の画像にも使えるのでぜひ使ってみてください。

Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

posted with amazlet at 18.10.15

アドビシステムズ (2013-10-01)
売り上げランキング: 48

Amazon.co.jpで詳細を見る