Как сделать фоновое изображение с использованием линейного градиента в IE 11?

Любая идея, как я могу сделать background-image с linear-gradient для работы с IE 11?

Следующий код отлично работает в IE 10, но не работает на IE 11.

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

Я могу сделать linear-gradient для работы с IE 6-9, 11, используя следующий filter, но фоновое изображение в этом случае не отображается.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )

Я открыт для идей.

Обновление: Здесь код, который у меня есть.

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );

Ответ 1

linear-gradient() поддерживается без изменений в RTM от IE10 и позже, включая IE11. Вам никогда не нужен префикс -ms-, если только по какой-то непонятной причине вам нужно настроить таргетинг на версии до версии IE10.

Обратите внимание, что синтаксис направленности для linear-gradient() отличается; то, что изначально было top, теперь представлено как to bottom вместо этого (см. это сообщение в блоге, этот вопрос и спецификация):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);

Ответ 2

Беспокойство, не так ли?

До IE 11,

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');

Для IE 11:

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

Этим людям, мы должны не только беспокоиться о поддержке старых IE, но, видимо, теперь нам придется иметь дело с общими чертами NEWER IE...

Ответ 3

Это все великолепные решения , если вы накладываете линейный градиент непосредственно на текст. Но если вы хотите отобразить его на верхней части изображения, он не работает в IE. Не спрашивайте меня, почему, но это не так.

Я собрал много ресурсов и, наконец, наткнулся на это diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

Я обернул это в селектор IE для 10+. Вам нужно включить непрозрачность, так как это поможет смешать наложение градиента с содержимым.

Надеюсь, это поможет кому-то!

Ответ 4

Я столкнулся с той же проблемой и, помимо выполнения фильтра и линейного градиента, мне также пришлось добавить ширину в мой класс CSS, как только я установил ширину, я мог видеть свой обычай стили с градиентом фона.