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