还是在写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;}