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 区域
.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设置页面背景图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法

iview table高度动态设置方法
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
详解搭建一个vue-cli的移动端H5开发模板
这篇文章主要介绍了详解搭建一个vue-cli的移动端H5开发模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vue制作toast组件npm包示例代码
这篇文章主要介绍了vue制作一个toast组件npm包,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
vue 集成jTopo 处理方法
这篇文章主要介绍了vue 集成jTopo 处理方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-08-08
非Vuex实现的登录状态判断封装实例代码
这篇文章主要给大家介绍了关于非Vuex实现的登录状态判断封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
Vue ECharts直角坐标系配置详细讲解
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库
2022-12-12
Vue核心概念Getter的使用方法
今天小编就为大家分享一篇关于Vue核心概念Getter的使用方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue实现pdf导出解决生成canvas模糊等问题(推荐)
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
2018-10-10
详解vue过滤器在v2.0版本用法
本篇文章主要介绍了vue过滤器在v2.0版本用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue vuex配置项和多组件数据共享案例分享
这篇文章主要介绍了Vue vuex配置项和多组件数据共享案例分享，文章围绕Vue Vuex的相关资料展开配置项和多组件数据共享的案例分享，需要的小伙伴可以参考一下
2022-04-04