使用css或jquery创建透明模糊效果

Question

我正在使用bxSlider，我使用position：absolute在滑块顶部（比如滑块宽度的40％和相同高度）放置一个小表格。 现在，表单的背景需要是透明的（这是使用png图像实现的），但它也应该 BLUR 滑块图像位于表单部分后面的部分。

我试过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);
}