快捷導(dǎo)航

Uniapp設(shè)置頁面的背景圖片方法代碼

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

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

設(shè)置背景有兩種注意一個是全背景設(shè)置，一個是在相應(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)圖片的起點位置：

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

水平方向：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:沒有變形，完全顯示了，表示圖片一定被盒子包著，縮放后圖片兩邊都要縮到盒子里才會停止縮放，都是按比例縮放，不會變形