如何在Safari上以透明的线性渐变去除背景图像上的灰色背景

Question

我想创建这个问题然后回答它，以防将来有人遇到它。在背景图像的线性渐变中使用透明作为颜色变量似乎存在一些问题。我怀疑它与完全使用背景图像和线性渐变以及透明度和 Safari 有一些关系。它在背景图像应该出现的区域上产生一种奇怪的灰色。

 background-image: linear-gradient(to bottom, transparent,#fff);

Answer 1

解决方案就是将背景图像更改为背景并将透明度转换为 255、255、255、0 的 rgba。

在 Safari 中，如果您查看我创建的这个 codepen，您可以看到我能够复制问题并比较差异：

https://codepen.io/marselgray/pen/VwZaQyY?editors=1100#0

 .box{
   height: 100px;
   width: 100%;

   &--background{
     background: linear-gradient( to bottom, rgba(255,255,255,0),#fff);
   }

   &--backgroundimage{
     background-image: linear-gradient(to bottom, transparent,#fff);
   }
}