web-dev-qa-db-ja.com

CSS3 / HTML 5 / PNGは要素の背後にあるコンテンツをぼかします

固定位置のヘッダーの背後にあるコンテンツをぼかして、このdivの背後にあるユーザーのスクロールがぼやけるようにしています。

以前はCSSで単純な不透明度でこれを実現していましたが、これはDIVの背後にあるコンテンツを青くするのではなく、単にその前に半透明のパネルを課すだけです。

私が求めていることを達成するのは簡単ですが、簡単な方法はありますか？ PNG背景画像を使用するか、CSSを使用するか。

IOS7がこれを行う方法 http://www.Apple.com/ios/ios7/features/ を見てください。

csshtmlpngblur
14
RIK

2015年になりました。AppleはSafari 9を発表しました。これは新しいCSS機能backdrop-filterをサポートしています。このCSSルールをdivで使用すると、背後の要素にフィルターが適用されますそれだけ：

#myDiv {
    backdrop-filter: blur(10px);
}

example

この機能は現在、とにかくSafariでのみ使用できます（また、機能するためには-webkit接頭辞が必要です）。そのため、今のところ使用しないことをお勧めします。その場合は、@supportsまたは/およびJSを使用して、まだサポートしていないブラウザにフォールバックを実装してください。

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

caniuse.com の互換性の表と、 Chromium と Firefox 機能リクエスト。

Safariの新機能の詳細 .

9
Tiago Marinho

HTML5とJavaScriptの魔法が少しあれば、答えは「はい」です。

http://jsfiddle.net/nallenscott/WtQjY/41/

わら人形：

<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            <!-- content-->

        </article>
    </section>
</body>

jQuery 、 Stackblur 、および html2canvas が必要です。

  1. コンテンツ領域を複製して、キャンバスに変換します。
  2. キャンバスをヘッダーに移動します。

  3. コンテンツのスクロールをヘッダーのキャンバスと同期します。

    html2canvasはキャンバスを作成し、Stackblurはキャンバスにガウスぼかしを作成します。ヘッダー要素は.blurheader divの上に重ねられて、半透明性をシミュレートします。

JavaScriptに慣れている場合は、さらに調査する価値があります。 IE、Chrome、Safari、Firefoxの最新バージョンをサポートし、レガシーブラウザーの適切なフォールバックオプションを許可します。

乾杯。

26
nallenscott

これは本当に難しいです。現在、iOSのように要素をぼかしたり、ぼかしたりできないので、それを行うことはできません。部分的にぼかすことはできません。

他の要素にはWebkitのぼかしフィルターを使用できますが、それだけでは十分ではありません。

それを使用するちょっと良い方法は：

*:not(.unblurred) {
 -webkit-filter: blur(1px);
}

しかし、これはほとんどすべてのケースで本当に理想的ではありません。

CSSカスタムシェーダーは、おそらく-moz-elementを背景として使用しているように、有望である可能性がありますが、現在のところ、答えは基本的に「運が悪い」です。

Firefoxで http://iamvdo.me/conf/2012/kiwiparty/#/ を試して（任意の場所をクリック）、-moz-element効果を確認します。悪くはありませんが、サポートは限られており、非常に遅いです。

http://codepen.io/simurai/pen/dFzxL は、悪くないデモを示していますが、事前にわかっている背景画像があることに依存しています。

http://webdirections.org/demos/translucency/index.html も別のデモですが、まったく悪くはありません。チュートリアルは http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/

2
Rich Bradshaw

いいえ、まだ何かの下にあるコンテンツをぼかすことはできません。要素自体をぼかす必要があります。

あなたが探している答えはこの質問にあります CSSを使用したHTMLのブラーImgとDivの

1
skmasq

<canvas>なしでそれを行う方法は次のとおりです。

  1. 部分的にブロックされた要素を含むサブツリーのディープクローンを作成します。
  2. クローンをぼかして配置し、元のサブツリーの上に重ねます。
  3. クローンをブロッキング要素にクリップします。
  4. 元のサブツリーをブロッキング要素の外側の領域にクリップします（クリップパスを使用）。

私はこの方法を実験しています ここ 。それを行うコードは、主に here です。

いくつかの欠点は次のとおりです。

  1. 要素の可視性を変更したり、DOMを変更したりする場合は、クローンを更新する必要があります。
  2. スクロールが少し遅くなることがあります。
  3. 部分的にブロックされた要素のクローンは、これを機能させるために同じスタイルにする必要があります。
0
hagabaka