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>