Webkit模糊与透明背景 [英] Webkit blur with transparent background

问题描述

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

In CSS3, I can easily blur anything with this:

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

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

Right now, I am trying to create a draggable circle on top of text so that anything inside the area of that circle will be blurred:

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

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

This technically should work, but this is what I see instead:

>

它看起来越野车，最重要的部分是半透明圆内的文本不模糊。有没有办法使用CSS或JavaScript修复它？

It looks buggy, and the most important part is that the text inside the semi-transparent circle is not blurred. Is there a way to fix it with CSS or JavaScript?

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

推荐答案

问题是没有suport用于掩蔽滤波器。
也就是说，过滤器应用于全部元素。
此限制的一个解决方法是有2个元素，将过滤器应用于一个，并将其屏蔽为透明度。

The problem is that there is no suport for masking a filter. That is, the filter is applied to all the element. One workaround for this limitation is to have 2 elements, apply the filter to one, and mask it to transparency. Then you have the second (identical) element showing, unfiltered.

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，内容相同。

that is 2 div nested, and with the same content.

我不喜欢的东西：

你需要两个相同内容的div。

You need 2 divs with the same content.

您需要将掩码位置（div 2中）与背景位置（div1中）同步。
你可以在div 2中设置圆圈，也许同时移动所有的东西，但是这个圆圈是模糊的。

You need to synchronize the mask position (in div 2) with the background position (in div1). You could set the circle in div 2 and maybe move everything at the same time, but then the circle is blurred.

但它是一个开始：

BTW，我已经使用了渐变的最新语法。因为从一开始你的兼容性有限，我不认为你应该关心。

BTW, I have used everywhere the latest syntax of gradients. Since you are limited in compatibility from the beginning, I don't think you should care.

这篇关于Webkit模糊与透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！