設(shè)置背景有兩種注意一個(gè)是全背景設(shè)置，一個(gè)是在相應(yīng)的view內(nèi)設(shè)置背景這是設(shè)置大背景

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

這是在相應(yīng)的view內(nèi)設(shè)置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è)置背景圖片的很多參數(shù)：

(1)url:圖片路徑

(2)no-repeat/repeat:是否平鋪（repeat:水平垂直都平鋪，默認(rèn)。no-repeat:不平鋪）

(3)repeat-x:水平平鋪

(4)repeat-y:垂直平鋪

(5)圖片的起點(diǎn)位置：

!!!此值一共有兩個(gè)，第一個(gè)：是水平位置，如果是具體的px值的話代表距離左邊多少。第二個(gè)：垂直位置，如果給具體的px值代表距離上邊多少。如果給百分比表示圖片的百分比要重疊在盒子百分比那個(gè)位置上

水平方向：left(默認(rèn)相當(dāng)于0) center right

垂直方向：top(默認(rèn)相當(dāng)于0) center bottom

（6）圖片大?。耗J(rèn)是圖片的大小

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

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

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

總結(jié) 

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