如何避免Safari中的线性渐变变暗效果？

Question

＆＃13;

＆＃13;

div {
   width: 100px;
   height: 100px;
   background: linear-gradient(top, blue, transparent);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Chrome 62渲染：

Safari 11呈现：

你如何在Safari中避免这种变暗效果？

Answer 1

尝试将透明度设置为rgba颜色值。例如：

background: linear-gradient(top, blue, rgba(0,0,255,0));

两者的RGB值必须匹配。

Answer 2

首先，您对当前语法有疑问， 在Chrome中，您必须在指示前添加“至”，否则它将被视为“无效属性”，因此它应为background: linear-gradient(to bottom, blue, transparent);， 然后使用跨浏览器解决方案：

div {
   width: 100px;
   height: 100px;
   /* For browsers that do not support gradients */
   background: blue; 
   /* For Safari 5.1 to 6.0 */
   background: -webkit-linear-gradient(top, blue, transparent); 
   /* For Opera 11.1 to 12.0 */
   background: -o-linear-gradient(top, blue, transparent); 
   /* For Firefox 3.6 to 15 */
   background: -moz-linear-gradient(top, blue, transparent); 
   /* Standard syntax */
   background: linear-gradient(to bottom, blue, transparent);
}

<div></div>

您可以在W3schools了解有关Gradients的更多信息。