收藏
回答

ios12 css蒙版照片无法显示

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS ios12 苹果 2.0.8

- 在图片上放一个异形黑色透明图片作为蒙版,下方图片只能按照黑色异形透明区域显示,方案就是在<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


回答关注问题邀请回答
收藏

6 个回答

  • 黄思程
    黄思程
    2018-06-11

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

    2018-06-11
    有用
    回复 1
    • 亨亨爸爸
      亨亨爸爸
      2018-06-11

      ios11.4和ios12都出现问题,就是不显示图片了,是空白,去掉-webkit-前缀蒙版不显示了,也就是黑色图片不显示了,黑色下面的图片显示出来了。

      2018-06-11
      回复
  • 石头🐮
    石头🐮
    2018-06-11

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

    2018-06-11
    有用 1
    回复
  • 代号0炮灰
    代号0炮灰
    2020-07-31

    mask-image: url('@/static/mask.png');

    蒙版图片url使用本地路径,部分ios不显示问题已解决

    2020-07-31
    有用
    回复 1
    • 代号0炮灰
      代号0炮灰
      2020-08-03回复Archangelᴱᴿᴵᑦ
      项目根目录,根目录下的static文件夹。 小程序应该是./../  看引用代码在第几层了
      2020-08-03
      回复
  • 曾维超
    曾维超
    2018-12-25

    mask-image: url(URL);


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

    2018-12-25
    有用
    回复
  • 2018-09-30

    解决了吗?

    2018-09-30
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-06-08

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-06-08
    有用
    回复 2
    • 亨亨爸爸
      亨亨爸爸
      2018-06-11

      代码片段:wechatide://minicode/FphP55mK7qpe

      2018-06-11
      回复
    • 亨亨爸爸
      亨亨爸爸
      2018-06-13

      有解决办法吗

      2018-06-13
      回复
登录 后发表内容