css3——滤镜filter、高斯模糊blur，去除模糊的白边

简介

滤镜网址：
https://www.runoob.com/cssref/css3-pr-filter.html

blur(px) 给图像设置高斯模糊。”radius“一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

演示：

代码：

.bgImg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    filter: blur(3px);//主要代码
}

缺点：会有白边，不美观，解决方法，将图片在原有基础上放大一点点。

.bgImg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    filter: blur(3px);
    transform: scale(1.05);//解决代码
}

代码007普通

打赏 收藏 海报 链接