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

时间:2012-02-14 21:38:55

标签: css sass compass-sass

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

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

以下是我目前正在尝试的内容,但IE8及以下版本似乎并未认出来:

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

1 个答案:

答案 0 :(得分:8)

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