背面の要素にのみぼかしをかけたい

HTML,CSSにて、ある特定部分にのみ常にぼかしをかけておきたいです。

イメージはこういった感じです。
コンテンツをスクロールしても、ぼかしの部分のみコンテンツがぼかされる様になってほしいです。
(そこにのみフィルターをかけているイメージ)

以上、よろしくお願いいたします。

Artz

2018/02/20 19:26

背景（画像？）にブラーがかかるんでしょうか？コンテンツ（テキスト？）にブラーがかかるんでしょうか。添付画像だと前者に見えますがどちらでしょう？？？

cryson

2018/02/20 19:40

グレーゾーンはコンテンツです。コンテンツにかけたいと思っております。

行動規範の内容に同意します

回答3件

ベストアンサー

CSSのfilter: blurで要素に対してぼかしの効果が出せますが、要素の後ろにあるコンテンツにぼかしをかけることはできません。そのため、おっしゃるような見え方にしたい場合は、コンテンツのコピーを用意して、それにぼかしをつけて前面に置きます。スクロールがある場合は、スクロールを同期させるスクリプトをつけます。

css
1.head,
2.foot {
3  position: fixed;
4  left: 0;
5  right: 0;
6  height: 20vh;
7  overflow: hidden;
8}
9.head {
10  top: 0;
11}
12.foot {
13  bottom: 0;
14}
15.blur>* {
16  filter: blur(2px);
17}

javascript
1// ぼかしをかけたいコンテンツ
2var main = document.querySelector('main');
3
4// 上側に固定する要素
5var header = document.createElement('div');
6header.classList.add('head', 'blur');
7header.appendChild(main.cloneNode(true));
8document.body.appendChild(header);
9
10// 下側に固定する要素
11var footer = document.createElement('div');
12footer.classList.add('foot', 'blur');
13footer.appendChild(main.cloneNode(true));
14document.body.appendChild(footer);
15
16// スクロールを同期する
17function onScroll() {
18  var y = window.pageYOffset;
19  header.scrollTop = y;
20  footer.scrollTop = y + footer.getBoundingClientRect().top;
21}
22addEventListener('scroll', onScroll);
23onScroll();

こちらにサンプルを作りました。いかがでしょうか。
https://codepen.io/hoo-chan/pen/OQZNMM

ただし、動画の埋め込みがある場合など、コンテンツがユーザーの操作で変化する場合は、この方法は使えないでしょう。

ブラウザの対応が進めば、clip-pathを使う手もあります。
https://codepen.io/hoo-chan/pen/OQZNap

投稿2018/02/21 05:01

編集2018/02/21 05:40

退会済みユーザー

総合スコア0

cryson

2018/02/21 09:30

ありがとうございました。

行動規範の内容に同意します

コンテンツってのはテキストだったり画像だったりするんですよね。
いろんなやり方があると思いますが、おおざっぱでもいいならこんな感じでしょうか。
ブラーはbox-shadowで実現してます。::afterという疑似セレクタを使って、コンテンツ（ここではmainタグ)の上にbox-shadow付きの要素を被せてるイメージです。
https://codepen.io/artzsan/pen/xYWeeJ

投稿2018/02/20 20:15

Artz

総合スコア158

cryson

2018/02/21 02:59

ありがとうございます。かなり理想的になりましたが、デモの様に透明になるというより、ガラス越しの(Photoshopでいうガウスの様な)ぼかしにすることは可能でしょうか？

Artz

2018/02/21 08:17

ガウスぼかしだとfooさんが仰ってる通り、ぼかしをかけたコピーを前面に配置するようになります。もし境界をグラデーションにしたいなら、次のコードが参考になると思います。 https://codepen.io/iamvdo/pen/xECmI fooさんの例だと、.head.blur 要素と .foot.blur 要素に linear-gradient(#000,#000,#00000000)をでグラデーションをかけるなど考えられます。構文についての詳細はMDNで↓ https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

cryson

2018/02/21 09:30

ありがとうございました。

行動規範の内容に同意します

一応SVGフィルタを使えば出来なくはないけれど, 問題が多すぎるのでおすすめできません.

動作するWEBブラウザが限られる(FireFoxでのみ動作)
フィルタ効果は本質的に重すぎる(全画面への適用はもってのほか)
スクロールバーにまでフィルタが掛ってしまう
SVGフィルタの習得そのものが困難(メンテナンス不能になる)

HTML
1<svg width="0" height="0">
2	<defs>
3		<filter id="f" x="0" y="-50%" width="100%" height="200%" primitiveUnits="userSpaceOnUse" fiterUnits="userSpaceOnUse">
4			<feColorMatrix type="saturate" values=".5"/>
5			<feGaussianBlur stdDeviation="5" result="blur"/>
6			<feFlood floodColor="black" x="0" y="0" width="100%" height="100" result="a"/>
7			<feFlood floodColor="black" x="0" y="100%" width="100%" height="100"/>
8			<feOffset dy="-100" x="0" y="0" width="100%" height="100%" result="b"/>
9			<feMerge x="0" y="0" width="100%" height="100%">
10				<feMergeNode in="a"/>
11				<feMergeNode in="b"/>
12			</feMerge>
13			<feComposite x="0" y="0" width="100%" height="100%" in="SourceGraphic" operator="out"/>
14			<feMerge x="0" y="0" width="100%" height="100%">
15				<feMergeNode in="blur"/>
16				<feMergeNode/>
17			</feMerge>
18		</filter>
19	</defs>
20</svg>
21<div id="wrapper">
22	<img src="http://jsrun.it/assets/w/4/Z/x/w4Zxy.png"/>
23</div>

CSS
1img{
2	width: 100%;
3}
4#wrapper{
5	display: block;
6	position: absolute;
7	top: 0;
8	left: 0;
9	width: 100%;
10	height: 100%;
11	overflow: scroll;
12	filter: url(#f);
13}