vue設置頁面背景及背景圖片簡單示例

更新時間：2023年08月11日 11:43:39 作者：liyinchi1988

這篇文章主要給大家介紹了關于vue設置頁面背景及背景圖片的相關資料,在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

本地靜態(tài)圖片

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

實戰(zhàn)-PC web登錄頁

實戰(zhàn)-小程序登錄頁

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