如何在显示vuetify进度加载程序时模糊背景

Question

我想模糊整个背景，除了vuetify中的进度条。我搜索了很多解决方案，但没有找到任何解决方案。

问题：使除进度条外的整个背景变暗

以下是我的html布局

<div class="resume-wrapper">
<v-container fluid>
...
</v-container>
<div class="prg-wrapper">
<span style="display: inline-block; margin-bottom: 17px;">Downloading...</span>
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
></v-progress-linear>
</div>
</div>

我的css类似于这个

.prg-wrapper{
position: fixed;
left: 50%;
top: 29%;
transform: translate(-50%, -50%);
}

我正在使用vuetify-2.6.x这是进度条的文档https://vuetifyjs.com/en/components/progress-linear/#file-装载机

请提前帮我谢谢！！

Answer 1

您可能应该使用这样的

<v-overlay :value="spinnerVisible" z-index="998">
<v-progress-circular indeterminate size="64" />
</v-overlay>

否则，您可以使用背景过滤器来模糊背景：

<div class="overlay">
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
/>
</div>
<style>
.overlay
{
background-color: rgba(145, 150, 158, 0.6);
backdrop-filter: blur(2px);
}
</style>