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>

附设置背景图片的很多参数：

(1)url:图片路径

(2)no-repeat/repeat:是否平铺（repeat:水平垂直都平铺，默认。no-repeat:不平铺）

(3)repeat-x:水平平铺

(4)repeat-y:垂直平铺

(5)图片的起点位置：

!!!此值一共有两个，第一个：是水平位置，如果是具体的px值的话代表距离左边多少。第二个：垂直位置，如果给具体的px值代表距离上边多少。如果给百分比表示图片的百分比要重叠在盒子百分比那个位置上

水平方向：left(默认相当于0) center right

垂直方向：top(默认相当于0) center bottom

（6）图片大小：默认是图片的大小

background-size: cover:有一部分没有显示被覆盖的意思，表示图片一定要覆盖盒子，缩放后图片只要一边缩放到盒子内就停止缩放

background-size:contain:没有变形，完全显示了，表示图片一定被盒子包着，缩放后图片两边都要缩到盒子里才会停止缩放，都是按比例缩放，不会变形

background-size:百分比 百分比：表示背景图片的百分之多少

总结 

到此这篇关于Uniapp设置页面的背景图片的文章就介绍到这了,更多相关Uniapp设置页面背景图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！