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

css实现毛玻璃效果-强悍版
实景局部虚化
css实现毛玻璃实景局部虚化_第1张图片

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

你可能感兴趣的:(CSS/CSS3,css,html,html5)