⌘K

blur関数

関数blurは、ガウスぼかしを背景画像に適用できます。

構文

cssセレクタ {
  filter: blur(ぼかしのサイズ);
}

例

画像に2pxのぼかしを適用してみましょう： 

html<div id="elem"></div>
css#elem {
  filter: blur(2px);
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目

  • 関数brightness、
    背景の明るさを設定します
  • 関数contrast、
    背景のコントラストを設定します
  • 関数drop-shadow、
    背景に影を設定します
  • 関数hue-rotate、
    背景の色相を設定します
  • 関数invert、
    背景色を反転させます
  • 関数opacity、
    背景の不透明度を設定します
  • 関数sepia、
    背景をセピア調に変換します
  • プロパティbackground、
    背景に関するプロパティの一括指定です
  • プロパティbackground-image、
    ブロックに背景画像を設定できます
  • プロパティfilter、
    背景のスタイルを設定します
Backbackground-size プロパティNextbrightness関数