設置背景有兩種注意一個是全背景設置，一個是在相應的view內設置背景這是設置大背景

<template>
    <view class="container"> 
          <image class="bg-img" src="圖片路徑"></image>
          <view class="content"></view>
    </view> 
</template>

// 以下為 style 區(qū)域
.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>

附設置背景圖片的很多參數(shù)：

(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）圖片大?。耗J是圖片的大小

background-size: cover:有一部分沒有顯示被覆蓋的意思，表示圖片一定要覆蓋盒子，縮放后圖片只要一邊縮放到盒子內就停止縮放

background-size:contain:沒有變形，完全顯示了，表示圖片一定被盒子包著，縮放后圖片兩邊都要縮到盒子里才會停止縮放，都是按比例縮放，不會變形

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

總結 

到此這篇關于Uniapp設置頁面的背景圖片的文章就介紹到這了,更多相關Uniapp設置頁面背景圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！