最新版Safari、Chrome/Firefox中透明渐变效果无法正常生效

我之前也碰到过一模一样的问题！最新版的Safari、Chrome和Firefox对渐变里的透明色渲染偶尔会有奇怪的行为，尤其是当渐变终点是完全透明的时候。咱们试试这几个靠谱的修复方案：

方案1：换用方向关键字替代角度值，明确透明色写法 #

有时候浏览器对180deg的解析和to bottom的处理有细微差异，换用方向关键字更不容易出问题，同时确保透明色的写法清晰：

/* 优先用标准写法，现代浏览器都支持 */
background: linear-gradient(to bottom, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, rgba(255,255,255,0) 100%);
/* 给Safari额外加个前缀保险，虽然新版其实不需要，但也没坏处 */
background: -webkit-linear-gradient(to bottom, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, rgba(255,255,255,0) 100%);

方案2：匹配父元素背景色的透明值，避免纯白透明插值问题 #

如果你的元素父背景不是纯白色，用rgba(255,255,255,0)会让浏览器的颜色插值算法出现异常，导致渐变看起来“失效”。比如父背景是#f5f5f5，就改成对应颜色的透明版本：

background: linear-gradient(180deg, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, rgba(245,245,245,0) 100%);

这样渐变的过渡会和父背景完美衔接，不会出现断层或者不显示的情况。

方案3：拆分背景属性，用background-image单独定义渐变 #

有时候把渐变和背景色写在同一个background属性里会触发浏览器的渲染冲突，拆分写就能解决：

/* 设置兜底的背景色为透明 */
background-color: transparent;
/* 单独定义渐变作为背景图 */
background-image: linear-gradient(180deg, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, transparent 100%);
/* Safari 旧版本兼容 */
-webkit-background-image: -webkit-linear-gradient(180deg, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, transparent 100%);

额外排查：检查其他背景相关属性 #

如果上面的方法都没用，看看元素是不是设置了background-attachment: fixed或者奇怪的background-size值，这些属性偶尔会干扰渐变的渲染，暂时移除测试一下就能确认。

内容的提问来源于stack exchange，提问作者Angel Luis