Principio de implementación: Lo principal es aplicar el atributo background:hered y la herencia de background. El atributo de transformación no se puede utilizar aquí; de lo contrario, el fondo cambiará y no se logrará el efecto claro.
heredar, usar herencia
<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>