问题描述
可以用Chrome和Safari分别打开MDN中的例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient#Result_3
发现,Chrome中的渐变可以正常显示,但Safari中的渐变会出现灰色,没有达到预期的效果。
问题原因
Safari在渐变中对颜色的处理是同时渐变rgba()
中的每一个参数,因此该例子中实际上是在渐变从黑色到颜色,从全透明到不透明。因此,中间出现了灰色。
解决方法
将rgba()中的前三个参数,设置成背景色的颜色值即可。