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

问题描述

可以用Chrome和Safari分别打开MDN中的例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient#Result_3

发现，Chrome中的渐变可以正常显示，但Safari中的渐变会出现灰色，没有达到预期的效果。

问题原因

Safari在渐变中对颜色的处理是同时渐变rgba()中的每一个参数，因此该例子中实际上是在渐变从黑色到颜色，从全透明到不透明。因此，中间出现了灰色。

解决方法

将rgba()中的前三个参数，设置成背景色的颜色值即可。