css遮罩全屏居中對齊的實現(xiàn)方式
發(fā)布時間:2018-07-16 17:18:48 作者:佚名
我要評論
本文通過實例代碼給大家介紹了css遮罩全屏居中對齊的實現(xiàn)方式,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
具體代碼如下所示:
<style>
#toastLoaderFullScreen {
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
background-color: rgba(224, 38, 38, 0.5);
}
#toastLoader {
position: absolute;
left: 50%;
top: 45%;
width: 350px;
margin-left: -19px;
/* background-color: blue; */
}
#toastLoaderText {
position: fixed;
top: 53%;
left: 50%;
width: 250px;
margin-top: -10px;
margin-left: -125px;
word-wrap:break-word; /*自動換行*/
text-align: center;
/* background-color: red; */
}
</style>
<template>
<div id="toastLoaderFullScreen">
<div>
<mu-circular-progress id="toastLoader" :size="40" color="rgb(24, 143, 254)" v-show="isToastLoader"></mu-circular-progress>
<div id="toastLoaderText">
<p>正在登錄中</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isToastLoader: true
}
},
created() {
// setTimeout(() => {
// this.isToastLoader = false
// }, 2000)
},
methods: {
}
}
</script>

總結(jié)
以上所述是小編給大家介紹的css遮罩全屏居中對齊的實現(xiàn)方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章

css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細(xì)的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10
這是一款純CSS3實現(xiàn)的全屏背景圖片縮小漸變切換效果源碼,頁面的背景圖可呈現(xiàn)定時漸變與切換效果。漸變大小縮放效果流暢自然,采用純css3技術(shù)控制切換效果。2016-06-22CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13
jQuery+CSS3實現(xiàn)鼠標(biāo)點擊背景圖片向上拉伸切換特效源碼
jQuery+CSS3實現(xiàn)鼠標(biāo)點擊按鈕背景圖片向上拉伸切換特效源碼是一款鼠標(biāo)點擊按鈕像拉窗簾一樣向上拉伸特效,通過點擊某一張圖片背景全屏展示,效果非常棒,有需要的朋友可以2016-06-01
jquery+css3實現(xiàn)的網(wǎng)頁背景圖片固定內(nèi)容切換特效源碼
是一段實現(xiàn)了將不同的圖片固定在背景中,鼠標(biāo)下拉時切換圖片及圖片所對應(yīng)的相關(guān)內(nèi)容的效果代碼,唯一不同的是,圖片固定在背景上不動,本段代碼適應(yīng)于所有網(wǎng)頁使用,有興趣2016-03-22
這篇文章主要介紹了CSS實現(xiàn)鏤空遮罩效果,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-20- 這篇文章主要介紹了CSS3 mask 遮罩的具體使用方法,詳細(xì)的介紹了CSS3 mask 遮罩的具體使用,具有一定的參考價值,有興趣的可以了解一下2017-11-03
前段時間在開發(fā)中,遇到需要給背景層加顏色遮罩的項目,現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法,感興趣的朋友跟隨小編一起看看吧2019-11-05







