解决全屏Blur白边问题

还是在写vtuber-music时候遇到的这个问题，背景的全屏图片需要模糊，但是反复论证filter: blur()只能作用于窗口范围，不能通过margin或者top，left的方式顶出去，而backdrop的方式性能差而且兼容性又不好，所以试来试去找到个办法

效果图

 

Vue特别方法（css伪类）

vue遇到的问题是需要动态刷新背景，而在vue里的css刷新图片url部分是不会携带background-size这个属性的，所以图片变更的代码里带了background-size如下

xxx.background = 'url(' + background.src + ') no-repeat center center/cover fixed'
// 这里/cover就是background-size
			

而我刚刚说到blur只作用于窗口内，所以无论backfround怎么移动，白边始终都会有，而伪类会解决这个问题，代码如下：

.bg {
		position: absolute;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		user-select: none;
		transition: background 0.5s;
		overflow: hidden;
		
		z-index: 0;
		&:after{
			content: '';
			position: absolute;
			width: 130%;       
			height: 130%;
			left: 0;
			top: 0;
			z-index: 1;
			/*backdrop-filter: blur(3rem);*/
			filter: blur(2rem);
			transform: translate(-3rem,-3rem);
			background: inherit;
			background-size: 200% 200%;
		}
	}

/* 这里的 width,height 130% 只是个估算值，要想精细控制建议用 calc() */

用top和left顶住去

这就很简单易懂了

.bg {
		position: absolute;
		margin: 0;
		padding: 0;
		width: 130%;
		height: 130%;
		top: -3rem;
		left: -3rem;
		user-select: none;
		filter: blur(3rem);
		/*transform: translate(-3rem,-3rem);*/  // 用这里的transform也行
		transition: background 0.5s;
		overflow: hidden;
	}