css中文字在背景图片上的效果是如何做的?
发布时间:2022-01-14 13:22 所属栏目:13 来源:互联网
导读:css中文字在背景图片上的效果是怎样做的?很多朋友在做网页的时候,想要文字在背景图上方的效果,其实实现方法很简单,设置文字z-index属性高于图片就可以啦,接下来我们来看具体的实例。 div class=imgs !-- 背景图 -- div class=background img :src=item.v
css中文字在背景图片上的效果是怎样做的?很多朋友在做网页的时候,想要文字在背景图上方的效果,其实实现方法很简单,设置文字z-index属性高于图片就可以啦,接下来我们来看具体的实例。 <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:设置宽高; 背景图片:1)如果是铺满则宽高都设置100%,2)如果只占一个部分可设置定位。重点:z-index一定要比文字的层级低,否则会被遮住; 文字:根据需求放置位置可定位可不定位,重点z-index设置高于图片; .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; } } (编辑:ASP站长网) |
相关内容
网友评论
推荐文章
热点阅读