快捷導(dǎo)航

Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法

更新時(shí)間：2023年01月15日 11:56:41 作者：zyyn_未來(lái)可期

在做項(xiàng)目的時(shí)候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

今天來(lái)為我自己的項(xiàng)目設(shè)置一個(gè)好看的登錄頁(yè)面之前是這樣的：

乍一看感覺(jué)還行，越看越難受，弄一個(gè)好看的圖片來(lái)做登錄頁(yè)面的背景提上日程，哈哈哈哈~

讓我們先來(lái)看一下設(shè)置之后的效果：

怎么樣怎么樣家人們，是不是一下就感覺(jué)逼格上來(lái)了。

接下來(lái)我們直接上代碼：

1、首先在自己的登錄頁(yè)面中加兩個(gè)div標(biāo)簽

<div class="wrapper">
    //背景中的內(nèi)容
    <div id="building">
    //放在這里的內(nèi)容都會(huì)透明顯示
    </div>
</div>

參考login頁(yè)面：

<template>
  <div class="wrapper">
    <div id="building"
         style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center;font-size: 24px"><b>登 錄</b></div>
      <el-form :model="user" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="primary" size="small" autocomplete="off" @click="login">登 錄</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注 冊(cè)</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

2、css樣式如下

<style>
.wrapper {
  /*漸變的背景色*/
  /*height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);
  overflow: hidden;*/
  /*背景圖*/
  background: url("../assets/login-background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

#building {
  /*設(shè)置透明度，0為完全透明，1為不透明*/
  opacity: 0.75;
}
</style>

補(bǔ)充知識(shí)：vue組件中設(shè)置背景圖片，隨著頁(yè)面高度的增加，背景圖片能夠不斷延伸鋪滿屏幕

在做項(xiàng)目的時(shí)候，想要實(shí)現(xiàn)背景圖片將整個(gè)頁(yè)面鋪滿，等內(nèi)容變多，高度超過(guò)屏幕高度的時(shí)候，背景圖片仍然能夠完全鋪滿。

這種方式就是將上面進(jìn)行結(jié)合，當(dāng)頁(yè)面開(kāi)始超過(guò)屏幕高度的時(shí)候，就可以讓他進(jìn)行滾動(dòng)。