Uniapp設置頁面的背景圖片方法代碼

更新時間：2024年03月13日 10:14:16 作者：歐皇夏老板

這篇文章主要給大家介紹了關于Uniapp設置頁面的背景圖片,uni-app中設置背景圖有兩種方式,分別是全局設置和在相應的view內設置背景,文中給出了代碼示例,需要的朋友可以參考下

設置背景有兩種注意一個是全背景設置，一個是在相應的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）圖片大小：默認是圖片的大小

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

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