signed

QiShunwang

“诚信为本、客户至上”

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

2021/3/21 0:36:32   来源:

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模糊即可。