Как сделать фоновое изображение с линейным градиентом на 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 );
16
background-image css internet-explorer-11 linear-gradients

4 ответов

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

обратите внимание, что направленный синтаксис для linear-gradient() другое; то, что изначально top теперь представляется как (см. этот блог, этот вопрос и spec подробнее):

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

сводящий с ума, не так ли?

до IE 11,

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

для IE 11:

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

это правильно, люди, нам не только нужно беспокоиться о поддержке старых IEs, по-видимому, теперь нам придется иметь дело с новыми причудами IE...

8

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

Я scowered много ресурсов и наконец наткнулся на этот Дидди

@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+. Вам нужно включить непрозрачность, так как это поможет смешать Наложение градиента с содержание.

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

1

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

0