实现原理：主要就是要应用好background:inherit这个属性，背景的继承。这里不能用transform这个属性，不然背景会偏移，导致达不到清晰的效果。
inherit，使用继承
<body> <div class="father"> <div class="son">Background</div> </div> </body>
<style>
.father {
width: 800px;
height: 800px;
position: relative;
background: url("../img/7.jpg") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
}
.father:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.son {
position: absolute;
left: 40%;
top: 30%;
width: 200px;
height: 200px;
text-align: center;
background: inherit;
z-index: 15;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</style>
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
