当前位置：首页 > news >正文

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

news 来源：原创 2025/6/6 1:46:15

效果:

组件代码:

<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>