vue2实现背景颜色渐变

dreams_dream

已于 2025-08-28 22:04:56 修改

阅读量234

点赞数 9

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

于 2025-08-27 22:52:04 首次发布

本文链接：https://blog.csdn.net/dreams_dream/article/details/150936972

🎨 Vue 2 背景颜色渐变实现方式汇总

1 线性渐变（Linear Gradient）

<template>
  <div class="linear-bg">
    <h1>线性渐变背景</h1>
  </div>
</template>

<style scoped>
.linear-bg {
  height: 100vh;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}
</style>

📌 可选方向：

to bottom
to top right
45deg（角度）

2 径向渐变（Radial Gradient）

<template>
  <div class="radial-bg">
    <h1>径向渐变背景</h1>
  </div>
</template>

<style scoped>
.radial-bg {
  height: 100vh;
  background: radial-gradient(circle, #ffefba, #ffffff);
}
</style>

📌 可选形状：

circle
ellipse

3 多色渐变（Multi-color Gradient）

<template>
  <div class="multi-bg">
    <h1>多色渐变背景</h1>
  </div>
</template>

<style scoped>
.multi-bg {
  height: 100vh;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>

📌 用于炫彩背景、节日氛围等场景。

4 动态渐变（通过 `data` 或 `computed` 控制）

<template>
  <div :style="gradientStyle">
    <input type="color" v-model="colorStart" />
    <input type="color" v-model="colorEnd" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStart: '#ff7e5f',
      colorEnd: '#feb47b'
    };
  },
  computed: {
    gradientStyle() {
      return {
        height: '100vh',
        background: `linear-gradient(to right, ${this.colorStart}, ${this.colorEnd})`
      };
    }
  }
};
</script>

📌 用户可实时调整颜色，适合主题切换或个性化设置。

5 渐变按钮或导航栏

<template>
  <button class="gradient-btn">点击我</button>
</template>

<style scoped>
.gradient-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: white;
  font-size: 16px;
  cursor: pointer;
}
</style>

📌 渐变可用于按钮、卡片、导航栏等局部组件。

6 多层渐变叠加（高级效果）

<template>
  <div class="layered-bg">
    <h1>多层渐变背景</h1>
  </div>
</template>

<style scoped>
.layered-bg {
  height: 100vh;
  background: 
    linear-gradient(to bottom, rgba(255,0,0,0.5), rgba(255,0,0,0)),
    radial-gradient(circle, rgba(0,255,0,0.5), rgba(0,255,0,0));
}
</style>

📌 可用于玻璃拟态、模糊背景等视觉增强。

7 渐变动画（背景颜色动态变化）

<template>
  <div class="animated-bg">
    <h1>渐变动画背景</h1>
  </div>
</template>

<style scoped>
.animated-bg {
  height: 100vh;
  animation: gradientShift 5s infinite alternate;
  background: linear-gradient(270deg, #ff6ec4, #7873f5);
  background-size: 400% 400%;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
</style>

📌 适合炫酷首页或加载页。

8 响应式渐变（根据窗口大小或状态变化）

<template>
  <div :style="responsiveGradient">
    <h1>响应式渐变背景</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: window.innerWidth
    };
  },
  computed: {
    responsiveGradient() {
      const color = this.width > 768 ? '#00c6ff' : '#f77062';
      return {
        height: '100vh',
        background: `linear-gradient(to right, ${color}, #ffffff)`
      };
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.width = window.innerWidth;
    });
  }
};
</script>

📌 可用于移动端适配或暗/亮模式切换。

9 SVG 渐变背景（更复杂的图形渐变）

<template>
  <div class="svg-bg">
    <svg width="100%" height="100%">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#ff7e5f;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#feb47b;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad1)" />
    </svg>
  </div>
</template>

<style scoped>
.svg-bg {
  height: 100vh;
  overflow: hidden;
}
</style>

📌 适合需要精细控制渐变路径的场景。

10 多背景叠加渐变（叠加图层）

<template>
  <div class="multi-layer-bg">
    <h1>多层渐变叠加</h1>
  </div>
</template>

<style scoped>
.multi-layer-bg {
  height: 100vh;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0)),
    url('your-image.jpg');
  background-size: cover;
  background-blend-mode: overlay;
}
</style>

📌 用于图像上叠加渐变遮罩，提升可读性。

11 渐变遮罩（mask-image）

<template>
  <div class="masked-bg">
    <h1>渐变遮罩效果</h1>
  </div>
</template>

<style scoped>
.masked-bg {
  height: 100vh;
  background: url('your-image.jpg') center/cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
</style>

📌 适合做滚动区域的渐隐效果或内容遮罩。

12 渐变边框（不是背景，但视觉上很酷）

<template>
  <div class="gradient-border">
    <h1>渐变边框</h1>
  </div>
</template>

<style scoped>
.gradient-border {
  padding: 20px;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, #f6d365, #fda085) 1;
}
</style>

📌 可用于卡片组件、按钮或导航栏边框。

13 渐变文字背景（文字镂空渐变）

<template>
  <div class="text-gradient">
    <h1>渐变文字</h1>
  </div>
</template>

<style scoped>
.text-gradient h1 {
  font-size: 48px;
  background: linear-gradient(to right, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  color: transparent;
}
</style>

📌 适合标题、品牌标识、强调文字。

14 渐变滚动背景（结合 JS 实现动态滚动）

<template>
  <div :style="scrollGradient" class="scroll-bg">
    <h1>滚动渐变背景</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollY: 0
    };
  },
  computed: {
    scrollGradient() {
      const opacity = Math.min(this.scrollY / 500, 1);
      return {
        height: '100vh',
        background: `linear-gradient(to bottom, rgba(255,0,0,${opacity}), rgba(0,0,255,${1 - opacity}))`
      };
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.scrollY = window.scrollY;
    });
  }
};
</script>

📌 用于页面滚动时动态调整背景视觉。

15 CSS 变量驱动渐变（支持主题切换）

<template>
  <div class="theme-bg" :style="themeStyle">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false
    };
  },
  computed: {
    themeStyle() {
      const light = 'linear-gradient(to right, #fceabb, #f8b500)';
      const dark = 'linear-gradient(to right, #232526, #414345)';
      return {
        height: '100vh',
        background: this.isDark ? dark : light
      };
    }
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
    }
  }
};
</script>

📌 用于暗/亮模式渐变切换，也可扩展为多主题系统。

16 渐变与 clip-path 结合（裁剪形状）

<template>
  <div class="clipped-bg">
    <h1>裁剪渐变背景</h1>
  </div>
</template>

<style scoped>
.clipped-bg {
  height: 100vh;
  background: linear-gradient(to right, #ff6a00, #ee0979);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
</style>

📌 适合做斜切卡片、动态封面、视觉分割。

17 渐变与 `backdrop-filter` 结合（毛玻璃效果）

<template>
  <div class="glass-bg">
    <div class="glass-panel">
      <h1>毛玻璃渐变</h1>
    </div>
  </div>
</template>

<style scoped>
.glass-bg {
  height: 100vh;
  background: url('your-image.jpg') center/cover no-repeat;
}

.glass-panel {
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 10px;
  margin: 100px auto;
  width: 80%;
  color: #333;
}
</style>

📌 用于模态框、登录页、仪表盘组件。

18 从中间向两边渐变为白（水平展开）

<template>
  <div class="center-horizontal">
    <h1>中间向左右渐变</h1>
  </div>
</template>

<style scoped>
.center-horizontal {
  height: 100vh;
  background: linear-gradient(to left, white, #3498db 50%, white);
}
</style>

📌 说明：

渐变从中间颜色（蓝色）向左右两边变白
to left 表示从右向左绘制，但颜色顺序是从左到右定义的

19 从中间向上下渐变为白（垂直展开）

<template>
  <div class="center-vertical">
    <h1>从中间向上下渐变为白</h1>
  </div>
</template>

<style scoped>
.center-vertical {
  height: 100vh;
  background: linear-gradient(to top, white, #3498db 50%, white);
}
</style>

📌 适合做中轴对称的视觉效果，比如登录页背景。

20 从中间斜向左上和右下渐变（对角线展开）

<template>
  <div class="center-diagonal">
    <h1>从中间斜向左上和右下渐变</h1>
  </div>
</template>

<style scoped>
.center-diagonal {
  height: 100vh;
  background: linear-gradient(135deg, white, #3498db 50%, white);
}
</style>

📌 135deg 表示从左上到右下方向绘制，颜色在中间最深，两端变浅。

21 使用径向渐变模拟中心向四周扩散

<template>
  <div class="radial-center">
    <h1>使用径向渐变模拟中心向四周扩散</h1>
  </div>
</template>

<style scoped>
.radial-center {
  height: 100vh;
  background: radial-gradient(circle at center, #3498db 0%, white 100%);
}
</style>

📌 适合做聚焦感或视觉中心突出。

22 使用多个颜色点模拟更复杂的中心渐变

<template>
  <div class="multi-stop-gradient">
    <h1>使用多个颜色点模拟更复杂的中心渐变</h1>
  </div>
</template>

<style scoped>
.multi-stop-gradient {
  height: 100vh;
  background: linear-gradient(135deg,
    white 0%,
    #a0c4ff 25%,
    #3498db 50%,
    #a0c4ff 75%,
    white 100%);
}
</style>

📌 颜色从白 → 浅蓝 → 深蓝 → 浅蓝 → 白，形成更柔和的过渡。