javascript - Webkit blur with transparent background -

in css3, can blur this:

-webkit-filter: blur(5px); -moz-filter: ... 

right now, trying create draggable circle on top of text inside area of circle blurred:

position:absolute; -webkit-filter: blur(3px); background: rgba(255, 255, 255, .3); 

this technically should work, see instead:

　　　　

it looks buggy, , important part text inside semi-transparent circle not blurred. there way fix css or javascript?

the example: http://jsfiddle.net/hsphd/

the problem there no suport masking filter. is, filter applied all element. 1 workaround limitation have 2 elements, apply filter one, , mask transparency. have second (identical) element showing, unfiltered.

the css be:

#one, #two {     position: absolute;     width: 200px;     height: 400px;     font-size: 18px; }  #one {     top: 20px;     left: 20px;     background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px);      background-position: -20px -20px; }  #two {     top: 0px;     left: 0px;     -webkit-filter: blur(2px);           -webkit-mask-position: -20px -20px;     -webkit-mask-size: 200px 400px;     -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px);      background-color: white; } 

abd html

<div id="one">lorem ipsum ... <div id="two">lorem ipsum .... </div> </div> 

that 2 div nested, , same content.

fiddle

things don't that:

you need 2 divs same content.

you need synchronize mask position (in div 2) background position (in div1). set circle in div 2 , maybe move @ same time, circle blurred.

but it's start :-)

btw, have used everywhere latest syntax of gradients. since limited in compatibility beginning, don't think should care.