Как использовать миксин Compass background-with-css2-fallback? - PullRequest
Новая
       8

Как использовать миксин Compass background-with-css2-fallback?

7 голосов
/ 15 февраля 2012

Как использовать миксин Compass background-with-css2-fallback с резервным вариантом?

Я специально хочу иметь возможность установить цвет фона по умолчанию для более старых версийIE.

Вот что я сейчас пытаюсь, но IE8 и ниже, похоже, не распознают это: 

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

1 Ответ

8 голосов
/ 15 февраля 2012

Цель 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, если вы хотите, чтобы цвет оставался позади градиента в новых браузерах.

...