您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)css如何實現(xiàn)文字在背景圖片之上的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
效果:
<div class="imgs"> <!-- 背景圖 --> <div class="background"> <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" /> </div> <!-- 文字 --> <div class="front"> <div v-if="item.voteTime"> <p>非常感謝!</p> <p>您已投票:<span>{{item.voteTime}}</span></p> </div> <p v-else style="color:#999999">抱歉,您未完成投票~</p> </div> </div> data() { return { imgSrc1:require('@/common/imgs/yitoupiao.png'), imgSrc2:require('@/common/imgs/weiwancheng.png'), } },
外面大的div:設(shè)置寬高;
背景圖片:1)如果是鋪滿則寬高都設(shè)置100%,2)如果只占一個部分可設(shè)置定位。重點:z-index一定要比文字的層級低,否則會被遮住;
文字:根據(jù)需求放置位置可定位可不定位,重點z-index設(shè)置高于圖片;
.imgs { background: #fff; position: relative; width: 100%; height: 250px; color: #195541; .background{ // width:100%; // height:100%; /**寬高100%是為了圖片鋪滿屏幕 */ // z-index:-1; z-index:1; position: absolute; width: 250px; height: 100%; right: 20px; bottom: 0px; } .front{ z-index:2; position: absolute; text-align: center; top: 39%; left: 25%; font-weight: normal; line-height: 40px; font-size: 28px; } }
開發(fā)過程中遇到一個bug:就是我一開始設(shè)置的背景圖片z-index為-1,導(dǎo)致在h6上,背景圖片一會兒能顯示一會兒沒法顯示,后來改為正數(shù)1,才解決了這個問題。
感謝各位的閱讀!關(guān)于“css如何實現(xiàn)文字在背景圖片之上”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。