Firefox 中的 css 线性渐变

Question

我正在尝试让这个渐变在 Firefox 中工作

background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,transparent),color-stop(50%,transparent),color-stop(50%,$panda), color-stop(100%,$panda)); /* Chrome,Safari4+ */

我已经尝试过这个，但没有运气？

background: linear-gradient(to bottom, #fff 0, #fff 50%, $panda 100%);

Answer 1

根据您的 Firefox 版本，-moz在使用背景线性渐变时可能必须使用前缀。

这是一个一般示例：

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

Mozilla 文档将提供更多有关如何在 Firefox 中渲染这些渐变的示例：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

另外，请参考我通常使用的一个不错的方便资源：http://css3please.com/