在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
效果: <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:设置宽高; .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; } } 开发过程中遇到一个bug:就是我一开始设置的背景图片z-index为-1,导致在h5上,背景图片一会儿能显示一会儿没法显示,后来改为正数1,才解决了这个问题。 到此这篇关于css实现文字在背景图片之上的文章就介绍到这了,更多相关css文字在背景图片上内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论