当前位置：首页 > VUE

vue实现毛玻璃效果

2026-02-21 12:08:06VUE

实现毛玻璃效果的方法

在Vue中实现毛玻璃效果，可以通过CSS的backdrop-filter属性或结合滤镜和伪元素实现。以下是几种常见方法：

使用CSS的backdrop-filter属性

这种方法简单直接，适用于现代浏览器：

<template>
  <div class="blur-background">
    <!-- 内容区域 -->
    <div class="content">
      <p>这里是毛玻璃效果的内容</p>
    </div>
  </div>
</template>

<style>
.blur-background {
  background-image: url('your-image.jpg');
  background-size: cover;
  height: 100vh;
}

.content {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
}
</style>

使用filter属性实现

对于不支持backdrop-filter的浏览器，可以使用filter属性：

<template>
  <div class="blur-container">
    <div class="background"></div>
    <div class="content">
      <p>这里是毛玻璃效果的内容</p>
    </div>
  </div>
</template>

<style>
.blur-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('your-image.jpg');
  background-size: cover;
  filter: blur(10px);
  z-index: -1;
}

.content {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
}
</style>

使用Vue动态绑定样式

可以根据需要动态调整模糊程度：

<template>
  <div class="container" :style="{ '--blur-amount': blurAmount + 'px' }">
    <div class="background"></div>
    <div class="content">
      <p>模糊程度: {{ blurAmount }}px</p>
      <input type="range" v-model="blurAmount" min="0" max="20">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blurAmount: 10
    }
  }
}
</script>

<style>
.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('your-image.jpg');
  background-size: cover;
  filter: blur(var(--blur-amount));
  z-index: -1;
}

.content {
  backdrop-filter: blur(var(--blur-amount));
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
}
</style>

浏览器兼容性考虑

对于需要更好浏览器兼容性的情况，可以结合两种方法：

.content {
  /* 现代浏览器 */
  backdrop-filter: blur(10px);

  /* 回退方案 */
  @supports not (backdrop-filter: blur(10px)) {
    background-color: rgba(255, 255, 255, 0.5);
  }
}