小图片的实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body {
height: 100%;
width: 100%;
}
.wrap {
height: 300px;
width: 500px;
margin: 30px;
float:left;
overflow: hidden;//去除高斯模糊后四周的白边效果
}
.wrap img {
height: 300px;
width: 500px;
filter: blur(5px);
}

blur是高斯模糊的程度,值越大越模糊

1
<div class=wrap> <img src="./img/03.jpg" /> </div>

预览:

背景的实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
.cover {
height: 100%;
width: 100%;
background-size: cover;
filter: blur(5px);
transform: scale(1.02)
}

预览:

使用已有开源js

戳我快速查看

后记

由于兼容性等问题,CSS的滤镜效果可能会部分情况下失效,特别在移动设备上,不仅会耗费较大资源,还可能导致页面卡顿。