14

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

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

私が求めているものを達成するためのチートであっても、簡単な方法はありますか. PNG 背景画像または CSS を使用するかどうか。

iOS7 がこれを行う方法を見てみましょうhttp://www.apple.com/ios/ios7/features/。

4

5 に答える 5

26

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作成し、キャンバス上にガウスぼかしを作成し、ヘッダー要素を div の上に重ねて.blurheader半透明性をシミュレートします。

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

乾杯。

于 2013-10-21T01:17:36.293 に答える
2

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

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

于 2013-06-29T12:44:40.287 に答える
2

これは本当に大変です。要素をぼかすことも、ぼかすこともできないため、現時点では iOS のように行うことはできません。一部だけをぼかすことはできません。

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

それを使用するちょっと良い方法は次のとおりです。

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

しかし、これはほとんどすべての場合に理想的ではありません。

-moz-element を背景として使用するなど、CSS カスタム シェーダーはおそらく有望ですが、現時点では基本的に「運が悪い」という答えが返ってきます。

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

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/です

于 2013-06-29T12:50:09.737 に答える
0

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

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

ここでこの方法を試しています。それを行うコードはほとんどここにあります。

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

  1. 要素の可視性を変更したり、DOM を変更したりする場合は、クローンを更新する必要があります。
  2. スクロールが少し遅くなることがあります。
  3. これが機能するには、部分的にブロックされた要素のクローンを同じスタイルにする必要があります。
于 2014-06-18T22:45:13.747 に答える