页面需要实现背景模糊，且在该模糊背景上有其他的元素，这些元素都需要显示高清。一开始想到的css3的
filter去做处理。
设计要求：
初步实现：
- 注意事项：如果需要在模糊背景上面，实现高清文字及其他东西的话，需要在其兄弟元素上设置，否则在模糊背景的子元素下，也是默认模糊效果的 演示如下
<style>
#a{
overflow: hidden; /*因为使用blur,所以边缘会出现模糊的白边，需要在父元素上设置overflow:hidden;*/
width: 200px;
height: 200px;
position: relative;
}
#a1{
width:200px;
height: 200px;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
filter: blur(4px);
}
#b{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
z-index: 2;
}
#a2{
width: 100px;
height: 100px;
background: #fff;
position: absolute;
z-index: 2;
left: 100px;
top:0;
}
</style>
</head>
<body>
<div id="a">
<div id="a1"style="background:url(https://res0.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.png) no-repeat center/ cover;;">
<div id="b">b</div>
</div>
<div id="a2">a2</div>
</div>
</body>
左边字体及背景都是模糊，右边是正常显示
filter:将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染,有点类似P图了,可以设置多种效果filter: blur(0px) opacity(1);。常用滤镜函数如下：
blur()函数将高斯模糊应用于输入图像,值越大越模糊
filter: blur(2px);
brightness()用于调整图像的明暗度。默认值是1；小于1时图像变暗，为0时显示为全黑图像；大于1时图像显示比原图更明亮
filter:brightness(0)
filter:brightness(0.5)
contrast()函数可调整输入图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1
filter:brightness(2)
-drop-shadow()函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版
filter: drop-shadow(16px 16px 10px black);
grayscale()函数将改变输入图像灰度
filter: grayscale(100%)
-hue-rotate() 函数在输入图像上应用色相旋转
filter: hue-rotate(90deg)
invert()函数反转输入图像
filter: invert(100%)
opacity()转化图像的透明程度。。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速
filter: opacity(50%)
saturate()函数转换图像饱和度
filter: saturate(400%)
sepia()函数将图像转换为深褐色
filter: sepia(400%)
使用filter的多个函数blur(4px) brightness(80%) opacity(0.8)，实现简易的倒影
<style>
.avator {
position: relative;
background: url(https://res0.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.png) no-repeat center center;
background-size: 100% 100%;
width: 200px;
height: 200px;
border-radius:50% ;
}
.avator::after {
content: "";
position: absolute;
top: 10%;
left: 0%;
width: 100%;
height: 100%;
background: inherit;
background-size: 100% 100%;
border-radius: 50%;
transform: scale(.95);
filter: blur(4px) brightness(80%) opacity(.8);
z-index: -1;
}
</style>
<body>
<div class="avator"></div>
</body>
