如何在 Safari 上使用透明线性渐变删除背景图像上的灰色背景

Question

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

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

Answer 1

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

在 Safari 中，如果您查看我创建的这个代码笔，您可以看到我能够重现问题并比较不同之处：

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);
   }
}