vue设置页面背景及背景图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了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登录页

vue背景图,前端,笔记,前端,javascript,html

实战-小程序登录页

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

vue背景图,前端,笔记,前端,javascript,html 文章来源地址https://www.toymoban.com/news/detail-517942.html