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目录下，使用绝对路径引用 - 考虑性能因素，避免使用过大背景图片
