2012-01-14 12 views
2

html、css、javascriptを使用して「屈折」ガラス効果を表示することはできますか?html5 css3ガラス効果(屈折あり)

私は、HTMLのdivを持っている(例:背景:RGBA(255,255,255,0.5))CSSでスタイル "ポップアップ表示" 透明に見えるし。私は屈折のために歪んだようにポップアップの下のhtmlページの部分をしたい。ポップアップの前景または背景に画像は使用されません。基礎となるHTMLページは動的であり、イメージを持つことができます。

+0

を参照してください。それは可能ですが、あなたがそれを使用したくないということはおそらく非常に不便です。たとえば、大きなJavaScriptライブラリを使用してキャンバスにスクリーンを「キャプチャ」し、*その*をぼかして、最後にバックグラウンドで表示するとします。 – Ryan

+0

しかし、あなたのレイアウトによっては、フィルタで鳴らすことができるかもしれません。 http://jsfiddle.net/minitech/rZ9cE/ – Ryan

答えて

1

あなたの背景がキャンバスの場合は、屈折画像をあなたのポップアップのサイズと位置を作成するためにコースティクスを使用することができます。短い答えは、残念ながら、 "ノー" であるhttp://www.klayge.org/material/3_12/Caustics/fastcaustics.pdf

Here is a nice demo of caustics using canvas.

+0

を参照してください。また、bgとポップアップの間にhtmlがあればどうしますか? – Joseph

+0

その質問はこちら[link](http://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element)に回答しました。 –

+0

私の実験では、画像を歪めているときに、画像の近似だけが必要であることが分かっています。 –

関連する問題