如何使用 Compass background-with-css2-fallback mixin？

Question

如何使用 Compass background-with-css2-fallback mixin 和后备？

我特别希望能够为旧版本的 IE 设置默认背景颜色。

这是我目前正在尝试的，但 IE8 及以下版本似乎无法识别它：

div {
  background: #0E1B31;
  @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322));
}

Answer 1

background-with-css2-fallback 的目的是让您免于编写background: #0E1B31; 行。你可以这样使用它：

div {
  @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322), #0E1B31);
}

你会得到这样的：

div {
  background: #0e1b31;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0e1b31), color-stop(100%, #0a1322)), #0e1b31;
  background: -webkit-linear-gradient(top, #0e1b31, #0a1322), #0e1b31;
  background: -moz-linear-gradient(top, #0e1b31, #0a1322), #0e1b31;
  background: -o-linear-gradient(top, #0e1b31, #0a1322), #0e1b31;
  background: -ms-linear-gradient(top, #0e1b31, #0a1322), #0e1b31;
  background: linear-gradient(top, #0e1b31, #0a1322), #0e1b31;
}

我想你真的只是想要：

div {
  background: #0E1B31;
  @include background(linear-gradient(top, #0E1B31, #0A1322));
}

它的工作原理相同，可读性更高，并且输出的代码更少。如果您希望颜色在较新的浏览器中停留在渐变后面，您可以将包含更改为 background-image。