css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题

如何解决CSS3毛玻璃效果blur有白边的问题

发布时间：2021-06-29 11:59:54

来源：亿速云

阅读：81

作者：小新

这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白边的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：

HTML：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

$('.login-mask').css("height", h);

$('.login-mask').css("width", w);

CSS：.login-wrap {

overflow: hidden;

}

.login-mask {

/* IE6~IE9 */

filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);

-webkit-filter: blur(100px);

-moz-filter: blur(100px);

-