欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年01月15日 11:56:41   作者:zyyn_未來可期  
在做項(xiàng)目的時(shí)候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡單方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

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

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

讓我們先來看一下設(shè)置之后的效果:

怎么樣怎么樣家人們 , 是不是一下就感覺逼格上來了。

接下來我們直接上代碼:

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

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

參考login頁面:

<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')">注 冊</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ǔ)充知識:vue組件中設(shè)置背景圖片,隨著頁面高度的增加,背景圖片能夠不斷延伸鋪滿屏幕

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

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

總結(jié)

到此這篇關(guān)于Vue中設(shè)置背景圖片和透明度的文章就介紹到這了,更多相關(guān)Vue設(shè)置背景圖片和透明度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論