css实现毛玻璃实景局部虚化

css实现毛玻璃效果-强悍版
实景局部虚化

<div class="filter">
    <div class="box"></div>
</div>

.filter{
    
    
    position: relative;
    width:500px;
    height: 312px;
    margin:10rem;
    background: url(./image/view.jpg) no-repeat 0px 0px / 500px 312px;
}

.box{
    
    
    position: absolute;
    width:146px;
    height: 220px;
    background: rgba(94, 255, 0, 0.13);
    top:68px;
    left:200px;
    box-shadow:1px 2px 12px 0px rgba(36, 34, 34, 0.4);
    border-radius: 4px;
    background: url(./image/view.jpg) no-repeat -200px -68px / 500px 312px;
    filter:blur(2px);
}

实现思路:
两层元素叠加，第二层元素通过绝对定位（相对于第一层），第二层元素样式设置filter模糊效果。
仅设置第二层元素的filter，无法作用于第一层，需在第二层设置相同背景图并定位叠加在底层元素上，形成视觉效果。

css-background简写

语法：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

名	解释
background-color	指定要使用的背景颜色
background-position	指定背景图像的位置
background-size	指定背景图片的大小
background-repeat	指定如何重复背景图像
background-origin	指定背景图像的定位区域
background-clip	指定背景图像的绘画区域
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚
background-image	指定要使用的一个或多个背景图像

如下，.filter定义宽500px 高312px，背景图平铺且定义宽500px 高312px，坐标0px px;
.box定义宽146px 高220px，背景图尺寸也同样定义为宽500px 高312px，背景图坐标为该元素坐标的负数值（反向），即可实现上下两层元素背景图片相吻合。

.filter{
    
    
    position: relative;
    width:500px;
    height: 312px;
    margin:10rem;
    background: url(./image/view.jpg) no-repeat 0px 0px / 500px 312px;
}

.box{
    
    
    position: absolute;
    width:146px;
    height: 220px;
    background: rgba(94, 255, 0, 0.13);
    top:68px;
    left:200px;
    box-shadow:1px 2px 12px 0px rgba(36, 34, 34, 0.4);
    border-radius: 4px;
    background: url(./image/view.jpg) no-repeat -200px -68px / 500px 312px;
    filter:blur(2px);
}

在.box类名的节点上定义filter模糊即可。