vue3 背景虚化，文字高亮效果

效果:

组件代码:

<template><div :style="styleComputed" class="background-blurring"><div class="mask"></div><div :style="styleComputed" class="blurring-text">background</div></div>
</template><script setup>
import { computed } from "vue";
const props = defineProps({url: String
});const styleComputed = computed(() => {return {backgroundImage: `url(${props.url})`};
});
</script><style scoped>
.background-blurring {background-repeat: no-repeat;width: 100%;height: 100%;font-size: 12vw;position: relative;
}
.background-blurring .blurring-text {width: 100%;height: 100%;-webkit-text-stroke: 2px #fff;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;background-clip: text;color: #0000;
}
.mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);
}
</style>

使用代码：

<template>// 传入图片资源<BackgroundBlurring :url="img"/>
<template><script setup>
// 引入组件
import BackgroundBlurring from "./components/BackgroundBlurring.vue";
// 引入资源
import img from "@/assets/imgs/background.jpg";
</script>