vue3背景图片模糊

在Vue3中，要实现背景图片的模糊效果可以通过添加一个蒙版在需要模糊的元素上面，通过修改蒙版的透明度来实现。首先，在需要模糊的元素上添加一个蒙版的div，可以给它设置一个特定的class名字，比如"mask"。然后，在这个class的样式中设置position为absolute，background为黑色(#000)，宽度和高度为100%，left和top为0，透明度为0。这样蒙版就会覆盖在背景图片上面。

接下来，在Vue的方法中，可以通过修改蒙版的透明度来实现模糊效果。可以给蒙版的div添加一个ref属性，比如"mask"，然后在方法中通过this.$refs.mask来获取到这个元素。可以定义一个方法，比如changMask(opacity)，通过修改this.$refs.mask.style.opacity来改变蒙版的透明度，从而实现模糊效果。比如设置opacity为0.5，蒙版就会变得半透明，背景图片也会呈现出模糊的效果。

另外，也可以通过修改元素的filter属性来实现模糊效果。但是要注意，使用filter来修改模糊度会消耗较多的性能，特别是在移动端上，不推荐使用filter来修改模糊度。如果非要使用filter，可以通过this.$refs.top.$el.style.filter=`blur(${scale}px)`来设置元素的模糊度，其中scale可以是一个变量，代表模糊的程度。但是要注意，频繁修改filter会导致性能较差。

总结来说，Vue3中实现背景图片的模糊效果可以通过添加一个蒙版并修改蒙版的透明度，或者通过修改元素的filter属性来实现。但是建议尽量避免频繁修改filter属性，以提高性能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue-模糊效果filter](https://blog.csdn.net/lihui61357457/article/details/123353007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue 动态获取图片作为背景 想实现背景模糊文字不模糊的效果](https://blog.csdn.net/weixin_39582708/article/details/114166003)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]