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-22
CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13jQuery+CSS3實現(xiàn)鼠標(biāo)點擊背景圖片向上拉伸切換特效源碼
jQuery+CSS3實現(xiàn)鼠標(biāo)點擊按鈕背景圖片向上拉伸切換特效源碼是一款鼠標(biāo)點擊按鈕像拉窗簾一樣向上拉伸特效,通過點擊某一張圖片背景全屏展示,效果非常棒,有需要的朋友可以2016-06-01jquery+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