脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Uniapp设置页面背景图片

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

您可能感兴趣的文章:

相关文章

  • Vue之Axios异步通信详解

    Vue之Axios异步通信详解

    这篇文章主要为大家介绍了Vue之Axios异步通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • Vue指令的学习

    Vue指令的学习

    这篇文章主要介绍了Vue指令，Vue官网一共有提供了14个指令，下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
    2021-10-10
  • Vue Element前端应用开发之树列表组件

    Vue Element前端应用开发之树列表组件

    本篇随笔主要介绍树列表组件和下拉列表树组件在项目中的使用，以及一个SplitPanel的组件。
    2021-05-05
  • vue项目中 jsconfig.json概念及使用步骤

    vue项目中 jsconfig.json概念及使用步骤

    这篇文章主要介绍了vue项目中 jsconfig.json是什么,本文仅仅简单介绍了 jsconfig .json 的一些基本配置，而 jsconfig .json提供了大量能使我们快速便捷提高代码效率的方法，需要的朋友可以参考下
    2022-07-07
  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue使用Swiper封装轮播图组件的方法详解

    Vue使用Swiper封装轮播图组件的方法详解

    Swiper是一个很常用的用于实现各种滑动效果的插件，PC端和移动端都能很好的适配。本文将利用Swiper实现封装轮播图组件，感兴趣的可以了解一下
    2022-09-09
  • vueJs函数toRaw markRaw使用对比详解

    vueJs函数toRaw markRaw使用对比详解

    这篇文章主要为大家介绍了vueJs函数toRaw markRaw使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • JavaScript的MVVM库Vue.js入门学习笔记

    JavaScript的MVVM库Vue.js入门学习笔记

    这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下
    2016-05-05
  • 详解基于webpack和vue.js搭建开发环境

    详解基于webpack和vue.js搭建开发环境

    本篇文章主要介绍了详解基于webpack和vue.js搭建开发环境 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    这篇文章主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论