這篇文章給大家分享的是有關(guān)css如何實(shí)現(xiàn)文字在背景圖片之上的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是一家專業(yè)提供保康企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為??当姸嗥髽I(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
效果:
<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è)置定位。重點(diǎn):z-index一定要比文字的層級低,否則會被遮??;
文字:根據(jù)需求放置位置可定位可不定位,重點(diǎn)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如何實(shí)現(xiàn)文字在背景圖片之上”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)站欄目:css如何實(shí)現(xiàn)文字在背景圖片之上
當(dāng)前地址:http://bm7419.com/article6/jjcsig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、響應(yīng)式網(wǎng)站、軟件開發(fā)、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)