查看了好多资料,最后发现需要利用伪元素才可以实现该效果,由于项目中背景图片是随时变化,所以在这里使用了css变量去控制
在这里bgUrl可以随便定义,只是一个css引用的标识;
export default {
data() {
return {
backgroundImage: '',
currentSrc
}
},
watch: {
currentSrc: {
handler() {
this.backgroundImage = `url(${this.musicDetail.bgUrl})`;
},
}
}
}
.container {
position: relative;
min-height: 100vh;
}
.container::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
filter: blur(10px);
background-size: 100% 100%;
background-image: var(--bg-url);
background-repeat: no-repeat;
}
在这里需要注意的一点是:利用var去调用变量的时候,不能使用驼峰式命名