1、fliter: blur
filter 属性定义了元素(通常是)的可视效果,blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;
filter: blur(5px);
2、方式一 直接使用flute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 filter(滤镜) 制作图片高斯模糊</title>
<style>
.gauss {
filter: blur(3px);
/* 高斯模糊 */
margin: 10% 35%;
/* 让图片靠中间 */
}
</style>
</head>
<body>
<img class="gauss" src="react-antd-dva/src/assets/login-bg.jpg" />
</body>
</html>
这是原图
这是模糊后的图片
3、方式二
定位模式处理图片边缘不模糊
在图片上在用另一个一个div来做模糊效果然后覆盖上去,方式一是对图片直接做模糊效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 filter(滤镜) 制作图片高斯模糊</title>
<style>
.top{
background: url(gauss.png) no-repeat;/* 引入背景图片 */
position: relative;/* 相对定位 */
width: 380px;/* 作为背景引入要给高宽 */
height: 385px;/* 作为背景引入要给高宽 */
margin: 10% 35%;/* 让图片在中间一点随意写下 */
}
.center{
position: absolute;/*绝对定位 */
background: inherit;/* 继承属性 */
width: 380px;/* 给div高宽 */
height: 385px;/* 给div高宽 */
filter: blur(5px);
}
</style>
</head>
<body>
<!-- 图片 -->
<div class="top">
<!-- 高斯模糊 -->
<div class="center"></div>
</div>
</body>
</html>