備忘録的プログラミングリファレンス

背景のぼかし(Background blur)

 CSSのみでの、背景色や背景画像のぼかし方法です。エレメントの内のコンテンツにはぼかしが入らない方法です。

 例では、背景画像とテキストの背景色をぼかしています。擬似エレメント::beforeでぼかした画像などを元の場所に被せるという技法です。 被せるために、元のエレメントにposition: relative;z-index: 0;、::beforeエレメントにposition: absolute;z-index: -1;を定義します。

 背景画像を::beforeエレメントでぼかした画像に加工しています。ここではopacityプロパティは使わない方が綺麗に見えます。
 背景画像を元のエレメントで定義した方が綺麗に見える場合もあります。

 背景色は、::beforeエレメントでぼかした加工をしています。ここではopacityプロパティを使い背景を透過させています。

 ::beforeエレメントにcontent: ' ';が定義していますが、::beforeエレメントに内容がないためです。内容がないエレメントの背景は表示されません。

動作の確認

cssあり/なし、scriptあり/なしを選択することができます。

HTML

 背景画像のぼかしと背景色のぼかし例です。背景画像はblurbckimg_testクラス、背景色はblurclr_testクラスで加工されます。

css

 ::before擬似エレメントを使います。::beforeエレメントのfilter: blur(5px);がぼかし加工です。

 ::beforeエレメントを元のエレメントに被せるために、positionプロパティとz-indexプロパティを使います。

 top、right、bottom、leftプロパティで、境目を綺麗にみえるように調整しています。

 content: '';は、::beforeエレメントが空のためにcontent: '';が無いと背景が表示されません。

JavaScript

 ないです。