vue设置页面背景及背景图片简单示例

<template>
    <view class="max">
        <image src="../../static/bg.png" mode=""></image>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
<style lang="scss" scoped>
    .max{
        image{
             z-index:-1; 
             width:100%; 
             height:100%; 
             position: fixed; 
             top:0; 
        }
    }
</style>

<template>
    <view class="">
     <view class="max">
      <image
        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-59f27697-00c5-4f1e-8c67-bb56e1e19e78/653c2495-cb7b-49a7-b6cb-f048e16fa5a7.jpg"
        mode=""
      ></image>
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
<style lang="scss" scoped>
    .max{
        image{
             z-index:-1; 
             width:100%; 
             height:100%; 
             position: fixed; 
             top:0; 
        }
    }
</style>

<template>
    <view class="container">  //最外层
          <view class="bg-colore"></view>  //此标签为最外层view标签的第一个子标签
          <view class="content"></view>
    </view> 
</template>
<script>
</script>
</style>
.bg-colore{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f4f4f4;
    z-index: -1;
}
<style>

<template>
    <view class="container"> 
          <image class="bg-img"  :src="imgSrc"></image>
          <view class="content"></view>
    </view> 
</template>
<script>
export default {
		name: "index",
		data() {
			return {
				imgSrc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-59f27697-00c5-4f1e-8c67-bb56e1e19e78/653c2495-cb7b-49a7-b6cb-f048e16fa5a7.jpg',
                    }
                }
                    }
</script>
<style>
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>