uniapp设置背景

设置全局背景样式

在App.vue文件中添加全局样式，使用page选择器设置页面背景。这种方式会影响所有页面背景。

<style>
page {
  background-color: #f5f5f5;
  /* 或使用背景图 */
  background-image: url('/static/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

设置单个页面背景

在特定页面的<style>标签中设置背景，仅影响当前页面。

<style>
.page-container {
  background: linear-gradient(to bottom, #1e90ff, #00bfff);
  min-height: 100vh;
}
</style>

动态修改背景

通过绑定样式实现动态背景切换，适用于需要交互改变背景的场景。

<template>
  <view :style="{background: bgColor}">
    <button @click="changeBg">切换背景</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgColor: '#ffffff'
    }
  },
  methods: {
    changeBg() {
      this.bgColor = '#000000'
    }
  }
}
</script>

使用渐变色背景

CSS渐变可以创建更丰富的背景效果。

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

注意事项

• H5端使用100vh设置高度时可能出现滚动条问题，建议使用min-height: 100vh
• 小程序端部分背景样式可能需要使用page-meta组件设置
• 背景图片建议放在static目录下，使用绝对路径引用
• 考虑性能因素，避免使用过大背景图片