ios12 css蒙版照片无法显示

发布于 8 年前作者 chou14029 次浏览最后编辑 8 年前来自 ask
  • 在图片上放一个异形黑色透明图片作为蒙版,下方图片只能按照黑色异形透明区域显示,方案就是在<image>标签加样式:

<image

src=‘{{page.image_url}}’

mode=‘aspectFill’

wx:if=“{{page.image_key != null}}”

style=“width:{{page.width}}rpx;height:{{page.height}}rpx;-webkit-mask-image:url(‘{{page.mask_image}}’);-webkit-mask-size: {{page.mask_width}}rpx {{page.mask_height}}rpx;margin-left:{{page.margin_left}}rpx;margin-top:{{page.margin_top}}rpx;position:absolute;z-index:900;”

/>

-webkit-mask-image:url 是黑色蒙版的照片地址,在安卓手机上可以正常显示,但是在苹果ios12上不显示,ios11可以显示。

  • 预期表现
  • 复现路径

  • 提供一个最简复现 Demo

5 回复
pingcheng
pingcheng2 楼6 年前

同问这个问题~~  经测试 发现css画的渐变mask是可以的 就是用图片就失效了

qiangtang
qiangtang3 楼6 年前

mask-image: url(URL);

URL 要是网络地址,本地图片在开发工具能显示,真机无法显示

qiangyao
qiangyao4 楼6 年前

你好,请问iOS12显示的是怎样的?试试去掉-webkit-前缀呢

wlu
wlu5 楼6 年前

解决了吗?