vue 如何設(shè)置背景顏色及透明度
更新時間：2021年06月30日 11:13:50 作者：rookiediary
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
背景顏色及透明度設(shè)置
如上圖，如果是第一張圖片，需要在左上角加上灰色背景，白色“封面”字樣，背景色需要有透明度。
首先，需要知道rgba() 函數(shù)。
rgba() 函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)的疊加來生成各式各樣的顏色。
RGBA 即紅色、綠色、藍(lán)色、透明度（英語：Red, Green, Blue、Alpha）。
- 紅色（R）0 到 255 間的整數(shù)，代表顏色中的紅色成分。。
- 綠色（G）0 到 255 間的整數(shù)，代表顏色中的綠色成分。
- 藍(lán)色（B）0 到 255 間的整數(shù)，代表顏色中的藍(lán)色成分。
- 透明度（A）取值 0~1 之間， 代表透明度。數(shù)值越小，透明度越高。
下面上vue代碼：
首先設(shè)置父級元素位置position: relative;然后設(shè)置子元素位置position: absolute;通過設(shè)置left、right、top、bottom來調(diào)整位置，然后設(shè)置背景色background:rgba(34,34,34,0.5);
設(shè)置button的背景色為透明色
在設(shè)置樣式時使用
background-color: unset
3.1.0 是設(shè)置了背景色的
登錄是沒有設(shè)置背景色的
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了v-for中的:key，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法
Vue項(xiàng)目創(chuàng)建時，我們見過vue-cli 創(chuàng)建項(xiàng)目和webpack 創(chuàng)建項(xiàng)目等方式，這篇文章主要介紹了Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法,需要的朋友可以參考下2023-06-06
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說it技術(shù)的更新真的太快了,作為vue2老用戶,我們在學(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
本篇文章主要給大家詳細(xì)代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對此有興趣的朋友可以學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了5分鐘學(xué)會Vue動畫效果(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
使用Vue父子組件通信實(shí)現(xiàn)todolist的功能示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Vue父子組件通信實(shí)現(xiàn)todolist的功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue?指令與過濾器，本文通過案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11