uni-app背景图
时间: 2023-12-10 22:02:55 浏览: 42
uni-app中设置背景图有两种方式,分别是全局设置和在相应的view内设置背景。具体方法如下:
1.全局设置背景图
在`<template>`标签中,设置一个包含背景图和内容的`<view>`标签,然后在`<style>`标签中设置`.bg-img`的样式,如下所示:
```html
<template>
<view class="container">
<image class="bg-img" src="图片路径"></image>
<view class="content"></view>
</view>
</template>
<style>
.bg-img {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>
```
2.在相应的view内设置背景图
在`<template>`标签中,设置一个包含内容的`<view>`标签,并在该标签上使用`:style`属性设置背景图,如下所示:
```html
<template>
<view class="content" :style="{background: 'url('+imageURL+')'}"></view>
</template>
<script>
export default {
data() {
return {
imageURL: '/static/kkk.png' // 图片路径
}
}
}
</script>
```