2012-01-14 5 views
2

html, css, javascript를 사용하여 '굴절'과 함께 유리 효과를 표시 할 수 있습니까?html5 css3 굴절 유리 효과

나는 CSS로 (예 : 배경 : rgba (255,255,255,0.5)) 스타일로 된 "html div"팝업을 투명하게 보입니다. 굴절 때문에 왜곡 된 모양의 팝업 아래 부분의 html 페이지를 원합니다. 팝업의 전경이나 배경에는 이미지가 사용되지 않습니다. 기본 html 페이지는 동적이며 이미지를 가질 수 있습니다.

+0

를 참조하십시오. 그것은 가능하지만, 아마도 당신이 그것을 사용하고 싶지 않을 것이므로 매우 불편할 것입니다. 예를 들어, 큰 자바 스크립트 라이브러리를 사용하여 화면을 캔버스에 "캡쳐"한 다음 * 그 *를 흐리게 처리하고 마지막으로 배경에 표시한다고 가정 해보십시오. – 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

내 실험에서 이미지를 왜곡 할 때 이미지의 근사값 만 필요하다는 것을 알았습니다! –