1

フルスクリーンのカバー画像と、このカバー画像の上にあるコンテンツを含む 2 つの div ブロックを持つページを作成する必要があります。

div ブロックには、Yahoo 天気アプリで使用される効果に似た、わずかにグレーのぼかした背景効果が必要です。

( https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf .&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3%TIP2F53%A%3%TipIOTup %252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F %3B960%3B540 )

しかし、背景全体をぼかすのではなく、オーバーレイされたdivの背景だけをぼかす必要があります-全体ではなく、頭痛の種です!

誰かが同様の結果を達成できましたか、またはJquery/Pure Cssまたはコンボを介して可能かどうか考えていますか?

4

4 に答える 4

3

あなたが望むことをすると主張するblur.jsと呼ばれるjQueryプラグインがあります。チェックしていませんが。

于 2013-06-17T13:15:32.910 に答える
1

私はちょうどこれを行う方法を考え出した! 背景とコンテンツ div は両方とも、同じ位置/サイズの同じ背景を持つ必要があります。background-attachment: fixed両方で使用します。でdivをぼかすことができます-webkit-filter: blur(5px);。ページ上の他のものの場所によっては、z-index を使用する必要がある場合があります。また、ぼかした div 内にコンテンツが必要な場合は、その上に配置された完全に別の div にある必要があります。そうしないと、内部のすべてがぼやけます。コードは次のとおりです。

<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
    <div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
    <div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px);  position: absolute;">

    </div>
    </div>
    <div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
        <p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
    </div>
</div>
</body>

私は jsfiddle をこれで動作させることができなかったので、誰かがそれを作ることができれば素晴らしいでしょう. ここでの全体的な考え方は、両方の div が同じ場所にまったく同じコンテンツを持っているということです。そうすれば、ぼやけた div がどこに移動しても、背景がぼやけているように見えます。

于 2013-10-06T20:44:28.920 に答える
1

これが役立つかどうかはわかりませんが、ぼかし効果が得られます。同様の質問がここで尋ねられました：

CSSで背景ぼかし

開発者は、ぼかし効果を与えるために svg ぼかしを使用しました。

それが役立つかどうかはわかりません。

于 2013-06-17T13:09:18.413 に答える