微信小程序 iphone14 css mask 使用图片实现遮照 疑似 no-repeat 失效

文章讲述了如何将图片转换为SVG格式,并讨论了在CSS中设置mask-image属性时的顺序敏感性。一个不正确的顺序可能导致显示异常,如TT奇妙的bug。示例代码展示了正确使用-webkit-mask-image,mask-image,mask-size,mask-position和mask-repeat的方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 将图片转为 换成svg类型

2. css设置属性时书写顺序(如果顺序不对会导致展示问题 T T 奇妙的bug)

.water-inner {
                    -webkit-mask-image: url("./water-black.svg");
                    mask-image: url("./water-black.svg");
                    -webkit-mask-size: contain;
                    -webkit-mask-position: center center;
                    -webkit-mask-repeat: no-repeat;
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值