使用CSS或jQuery创建透明模糊效果

Question

我正在使用bxSlider，并且使用位置：绝对位置，在滑块顶部放置一个小形状（例如，滑块宽度的40％和高度相同）。 现在，表单的背景需要是透明的（这是使用PNG图像创建的），但它也应该是位于表单部分后面的滑块图像部分。

我试过Blur.js，但它似乎只适用于背景图像。我也无法创建任何这样的图像，模糊了图像背后的任何其他图像。

感谢您的任何帮助:)

Answer 1

设置一个CSS滤镜来模糊背景。当您的表单在滑块图像上可见时，使用JS添加它。

/*change 5px with your favorite value. Test it*/ 
.blur{ 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
}