Vue中設(shè)置背景圖片和透明度的簡單方法
今天來為我自己的項(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)文章
使用Electron打包vue文件變成exe應(yīng)用程序的全過程
這篇文章主要給大家介紹了使用Electron打包vue文件變成exe應(yīng)用程序的全過程,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue中vite.config.js配置跨域以及環(huán)境配置方式
這篇文章主要介紹了vue中vite.config.js配置跨域以及環(huán)境配置方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11Vue3項(xiàng)目中使用自適應(yīng)Rem示例
這篇文章主要為大家介紹了Vue3項(xiàng)目中使用自適應(yīng)Rem示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08