cssのエアロ効果

Question

cssを使用してエアロガラスボックス効果を得るにはどうすればいいですか？私のユーザは、背景画像を動的に設定して興味のあるものにすることができます。だから私は動的で、特定の背景に応じて開発されたものとは違うガラスの箱がほしいと思う....

正確に..私はこのリンクに表示されているものを達成したい。 ： 彼らは私をグラスと呼んでいます：

しかし、これは動的でなければならず、背景にも適用する必要があります。 さらに、私たちの目的に合った色の値を知り、背景に固有のものであってもそのような効果を生み出す方法について、いくつかの洞察をしたいと思います。 それはちょうど経験か、彼らはどんなツールですか？説明してください.... 私は非常に上記のCSSテクニックを好むでしょう...

Answer 1

私は本当にこの例を見て、あなたが与えた例では、動的に設定された背景と正常に動作するようですので、あなたの問題が何であるかを理解しないOK：

http://jsfiddle.net/GGhKg/1603/

関連するコード：

background: rgba(0,0,0,0.25); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 

を

リンクをクリックするだけで、私の話していることが分かります。

これは意味ですか？

幸運を祈る！

Answer 2

技術は次のようになります：glassBoxのCSSコードをクラスにします。 div {}の代わりに.glass {}を使用し、背景イメージの上に置きます。このためには、ユーザーが変更したいバックグラウンドdivのCSS属性をコピーする必要があります。