Webkit模糊与透明背景

Question

在CSS3中，我可以轻松地模糊任何东西：

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

现在，我正在尝试在文字顶部创建一个可拖动的圆圈，以便该圆圈区域内的任何内容都会模糊：

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

这在技术上应该可行，但这是我所看到的：

它看起来很麻烦，最重要的部分是半透明圆圈内的文字没有模糊。有没有办法用CSS或JavaScript修复它？

示例：http://jsfiddle.net/hSpHd/

Answer 1

问题在于没有用于屏蔽过滤器的支持。 也就是说，过滤器应用于所有元素。 此限制的一种解决方法是使用2个元素，将过滤器应用于一个，并将其屏蔽为透明度。然后你有第二个（相同的）元素显示，未经过滤。

CSS将是：

#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>

这是2 div嵌套，具有相同的内容。

Fiddle

我不喜欢的事情：

您需要2个内容相同的div。

您需要将遮罩位置（在div 2中）与背景位置（在div1中）同步。 您可以在div 2中设置圆圈，也可以同时移动所有内容，但圆圈会模糊不清。

但这是一个开始： - ）

顺便说一句，我已经使用了最新的渐变语法。由于你的兼容性从一开始就有限，我认为你不应该关心。