Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8944

CSS:背景の一部をぼかす表現

$
0
0

See the Pen Frosted glass background by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

テキストの乗っているレイヤーを、擦りガラスで透かしたような表現を作っています。

CSS(Sass)

HTMLはごくシンプルなのでCSSの要点箇所について。

body,section:before{background:url("***.jpg");background-position:center;background-size:cover;background-attachment:fixed;}section:before{content:"";z-index:-1;-webkit-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px);position:absolute;width:100%;height:100%;margin:0;padding:0;}

まず bodysection:beforeに同一の背景画像を設定しています。

次に section:beforeのみにCSSフィルター filter:blurを設定しぼかしています。

sectionではなく section:beforeに背景を設定しているのが要です。

sectionblurを設定するとテキストなど中の要素すべてがぼけてしまうため、 section:beforeにぼかした背景を設定し section本体の後ろに重ねる形にする手法で実現しています。


Viewing all articles
Browse latest Browse all 8944

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>