首页 分类
阿荡的博客

Safari中CSS的linear-gradient从透明渐变发灰问题

创建时间:2022-09-06

更新时间:20 小时前

在 css 中为元素添加一个渐变的背景色,如果渐变色中包含透明色 transparent,在苹果手机中呈现时,透明色会变成灰色。

bug 复现,例如

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(transparent, red);
}

在 Chrome 中表现正常:

../images//34e5e5b0ee173a027aa59905761ea7a0a636fb.png

在苹果手机中不正常:

../images/203750f9069199fe80da9bab22548cc4d8aab6.jpeg

原因是,Safari 在渐变中对颜色的处理是同时渐变 rgba()中的每一个参数,transparent 等同于 rgba(0 0 0 / 0%),因此实际上是从黑色到红色渐变,从全透明到不透明渐变。 解决办法: 把 background: linear-gradient(transparent, red) 修改为 background: linear-gradient(rgba(255,255,255,0), red)