【CSS兼容问题】ios和android兼容问题 -- swiper的图片和定位文字层级问题

【兼容问题】ios和android兼容问题 – swiper的图片和文字层级

背景 :

swiper轮播图里, 在某个图片上使用定位添加动态的文字, 如下图

问题点 :

ios 系统下, swiper图片上的文字不显示, 有时需要上下滑动页面才会出来
而android 手机效果是正常的

处理 :

刚开始以为纯粹是文字没显示出来, 把图片隐藏掉才发现是图片层级比文字高, 把文字遮盖住了
而文字是通过绝对定位上去的, 按道理定位元素是比普通元素层级高的, 并且添加了z-index也不生效, 即使加了优先级最高的 ! important 也毫无作用

解决办法 :

既然解决不了 , 就想个小办法绕开这个问题, **原来图片是个image前景图, 那就把图片改成backgroundImage背景图, 果然文字层级可以比图片高了!! **
(之前也知道前景图背景图某些情况可以变通使用, 但是不愿意这么做, 因为之前开发小程序时, 把网络图片作为backgroundImage处理, 打包后不知怎的路径变成了weixin:// xxxx , 没办法识别~~~)

<swiper-item v-for="(item, index) in imgUrl" :key="index + 'imgUrl'">
	<view class="swiper-item"
		:style="{ background: 'url(' + item.url + ')', backgroundSize: '100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
		style="background-repeat:no-repeat;background-position:center;">
			<view v-if="item.type == 1" class="swiper-xunzhang-count">已获得{{ xunzhangCount }}枚，请再接再厉！</view>
	</view>
</swiper-item>