解决父元素背景图片模糊处理影响子元素的问题

当给父元素加背景图片且做模糊处理效果时子元素也会随之变模糊，如下
左上角白色区域就是子元素

代码如下

解决办法就是通过伪类before

<template>
	<div class="login">
		<div class="loginBox">
			不模糊了
		</div>
	</div>
</template>

<script>
	export default{
		name:'login'
	}
</script>

<style scoped>
	.login{
		height: 100%;
		width: 100%;
	}
	.login::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 100%;
		width: 100%;
		background-image: url('../../assets/loginImg/loginBg.jpg');
		/*background-size: 100% 100%;*/
		background-size:cover;
		background-repeat: no-repeat;
		-webkit-filter: blur(4px);
		filter: blur(4px);
	}
	.loginBox{
		width: 450px;
		height: 300px;
		background: #fff;
	}
</style>

效果如下

这就可以了，也有另一个解决方法就是，单独拿一个div盒子设背景图片且模糊处理