css实现文字在背景图片之上

2023-08-04 20:20| 来源: 网络整理| 查看: 265

效果：在这里插入图片描述

非常感谢！

您已投票：{{item.voteTime}}

抱歉，您未完成投票~

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; } }

开发过程中遇到一个bug：就是我一开始设置的背景图片z-index为-1，导致在h5上，背景图片一会儿能显示一会儿没法显示，后来改为正数1，才解决了这个问题。

【本文地址】

公司简介

联系我们