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>