Question

我正在尝试为div添加透明的线性渐变，并使其在不同的浏览器中工作似乎并不那么容易。

background-image:-moz-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-webkit-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-o-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-ms-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image: linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);

这在任何浏览器中都不起作用。如果我删除除 -moz-linear-gradient以外的所有行，则可以在Firefox中使用。怎么样？

错误消息为“无效的属性值”。但由于它仅适用于所提供的-moz-供应商，我认为价值应该是好的吗？

Answer 1

它们不起作用，因为除-moz-linear-gradient语法之外的所有内容都不正确。下面的代码段中提供了其他语法的正确语法供您参考。（用$ secondary-color替换红色。）

-webkit-linear-gradient语法支持双方语法，但看起来center不是允许的值。因此，例如，left top或left bottom作为第一个参数将产生对角线渐变，但left center不会产生任何输出。
标准linear-gradient属性不使用side side作为第一个参数。它使用to [side] [side]作为第一个参数。因此，对角线渐变为to left top或to left bottom，而水平渐变为to left或to right。

即使按MDN，center也不是-moz-linear-gradient函数的有效值，因此Firefox能够使用该值时会感到惊讶。也许，它只是忽略了无效值，而其他浏览器忽略了整个属性+值。

-moz-linear-gradient（[ [[top | bottom] || [left | right]] ，]？＆lt; color-stop＆gt; [，＆lt; color-stop＆gt;] +）;

body{
  min-height: 100vh;
  background-image: -webkit-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
  background-image: -moz-linear-gradient(left center, red, rgba(255, 82, 66, 0) 52%);
  background-image: -o-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
  background-image: linear-gradient(to right, red, rgba(255, 82, 66, 0) 52%);
}

CSS3线性渐变问题与不同的浏览器

1 个答案: