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>

cdn图片

<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>

实战-PC web登录页

实战-小程序登录页

<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>