创建时间:2022-09-06
更新时间:1 分钟前
在 css 中为元素添加一个渐变的背景色,如果渐变色中包含透明色 transparent,在苹果手机中呈现时,透明色会变成灰色。
bug 复现,例如
div {
width: 100px;
height: 100px;
background: linear-gradient(transparent, red);
}
在 Chrome 中表现正常:
在苹果手机中不正常:
原因是,Safari 中 transparent 等同于 rgba (0 0 0 / 0%),在渐变中对颜色的处理是同时渐变 rgba () 中的每一个参数,从黑色(0,0,0)到红色渐变,从全透明 (0%) 到不透明 (100%) 渐变。
解决办法:
background: linear-gradient(transparent, red)
修改为
background: linear-gradient(rgba(255,255,255,0), red)