2

All the ways of making a overlying div with frosted glass effect, usually can only do this based on an image background (such as http://www.blurjs.com/).

What I want to do is have a floating div (position:fixed) which will implement a frosted glass effect over whatever content is underneath, be it an image, text, video, etc..

Is this at all possible using any combination of jQuery/JavaScript/HTML/CSS ?

The only solution I've found so far is this one:

http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

Problem with this one is that its very slow as it waits for the page to render first before doing its magic so wont really work well on a high traffic site.

4

3 に答える 3

1

@elliopizzaman から提供されたリンクを使用して、フィドルを多少強化しました。画像を明るくする div レイヤーを追加することで、すりガラスのような外観を実現できました。エッジは期待したものではありませんが、効果は問題ありません。

http://jsfiddle.net/mNgQs/35/

HTML:

<div id="background">
    <div id="frost"></div>
</div>

CSS:

#frost {
   position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,.4);    
}

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://placekitten.com/200/300);

    -webkit-filter  : blur(8px);
    -moz-filter : blur(8px);
    -ms-filter  : blur(8px);
    -o-filter   : blur(8px);
    filter      : blur(8px);
}

たとえば、「ドラッグ可能な」ダイアログを作成した場合、フィルタがdivの「背後」に適用されるかどうかはわかりません。そのためには、キャンバス作業を行う必要があるかもしれません。

于 2013-10-29T02:16:43.803 に答える
1

私自身の質問に答えます。現時点では、これを動的な方法で行うことはできないようです。将来これを可能にする有望な変更がクロムに​​ありますが、現時点ではすべて開発段階にあります。

今のところ、静的コンテンツでのみ偽装できます。

于 2014-01-04T19:05:40.043 に答える
0

これは、あなたの望むことですか？？？？？http://jsfiddle.net/mNgQs/36/を確認してください。 以下を div に変更しました

 -webkit-filter : blur(2px);
-moz-filter : blur(2px);
-ms-filter  : blur(2px);
-o-filter   : blur(2px);
filter      : blur(2px);
于 2013-10-29T02:42:36.130 に答える