html5图片高斯模糊,CSS实现图片高斯模糊但边界清楚的效果

在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，那么CSS实现图片高斯模糊但边界清楚的效果怎么写呢？

有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：

CSS高斯模糊

/* 初始化 */

html,body {

margin: 0;

padding: 0;

height: 100%;

}

/* 图片外框 */

.box {

position: relative;

width: 800px;

height: 600px;

display: flex;

justify-content: center;

align-items: center; /* 使用flex将图片水平垂直居中 */

overflow: hidden; /* 溢出部分隐藏 */

}

/* 图片层 */

.image {

position: absolute;

width: 115%;

height: 115%;

background-image: url(example.jpg);

background-size: 100%;

background-position: center;

background-repeat: no-repeat;

filter: blur(20px); /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */

}