Uniapp设置页面的背景图片

2024-03-09 00:20:07 分类：前端热度：76 评论： 0

Uniapp设置页面的背景图片

设置背景有两种
注意一个是全背景设置，一个是在相应的view内设置背景
这是设置大背景

<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;
}

这是在相应的view内设置view块的背景

<template>
	<view class="content" :style="{background: 'url('+imageURL+')'}">
	<!-- 或者写成：<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}"> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '/static/kkk.png'//图片路径
			};
		}
	}
</script>