首页 前端知识 解决css背景图覆盖文字

解决css背景图覆盖文字

2024-10-29 23:10:41 前端知识 前端哥 511 32 我要收藏

项目需求:这是个导航栏(下面是uveiw的tabs标签),然后高亮的时候会有一个背景图,因为title不固定字数,所以宽度不能写死。
在这里插入图片描述

想要的效果
在这里插入图片描述
做出来的效果
在这里插入图片描述
自己写了个样式,用scroll-view,

<scroll-view scroll-x="true" class="main-scroll">
	<view class="main-item" v-for="(item,index) in mainList" :key="index" @click="changeMain(index)" :class="index == mainIndex ? 'f36 col-000 text-bold': 'f28 col-96a text-regular'">
		<view class="item-act flex align-c justify-c" v-show="index == mainIndex"></view>
		<view class="item-title">
			{{item.title||''}}
		</view>
	</view>
</scroll-view>
<style>
	.main-scroll{
		height: 64rpx;
		width: 100%;
		white-space: nowrap;
		.main-item{
			display: inline-block;
			padding: 0 20rpx;
			height: 64rpx;
			line-height: 64rpx !important;
			position: relative;
			.item-title{
				//position: relative;
			}
			.item-act{
				position: absolute;
				left: 0;
				right: 0;
				top: 10rpx;
				margin: auto;
				width: 66rpx;
				height: 44rpx;
				z-index: 0;
				background-image: url('');//图片自己设置
				background-position: 0 0;
				background-size: 100% 100%;
			}
		}
	}
</style>

因为用的是相对、绝对定位,会导致图片会覆盖到文字上。
后面找了下,发现item-title样式加上position: relative;就可以解决这个问题

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19520.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!