Диагональный градиент в IE

Есть ли способ иметь диагональный градиент в IE? В Chrome я мог бы сделать что-то вроде этого:

body{
    background-image:-webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0%,#f00),
    color-stop(50%,#0f0),
    color-stop(100%,#00f));
}

но это не работает в IE.

Ответы

Ответ 1

Да, это возможно! Хотя это не работает, а также реальный диагональный градиент в других прошивках.

Есть два важных аспекта этого решения, которые заставляют его работать:

  • Два div с одинаковым положением и разными значениями z-index (один поверх/перед другим) и разные направления градиента (одна горизонтальная, одна вертикальная)
  • Прозрачные/полупрозрачные цвета в градиентах (вы можете прочитать об этом в Прозрачность + градиент CSS3)

Просто поместите div с вертикальным градиентом позади div с горизонтальным градиентом (или наоборот, это не имеет значения) и убедитесь, что раскраска верхнего градиента не непрозрачна.

Результат выглядит следующим образом (Internet Explorer 8):

several rows of divs (purple vertical backdrop, alternating red/blue horizontal forground)Larger sample

И CSS:

//left sample
.back
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
    z-index:0;
}

.front
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
    z-index:1;
}

//right sample
.diaggradientback
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}

.diaggradientfront
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}

Обновление

documention в этом фильтре говорит, что несколько фильтров могут применяться вместе. Однако, как оказалось, применение более одного фильтра градиента приводит к тому, что применяется только последнее, поэтому простое применение обоих фильтров к одному слою не работает, и необходимы два слоя.

Ответ 2

Короткий ответ, к сожалению, нет, вы не можете. Фильтр градиента Microsoft двоичный - только слева направо или сверху вниз.

Однако вы можете использовать CSS3 PIE, чтобы делать то, что вы хотите. Имейте в виду, что поддержка PIE для градиентов в IE9 является несколько отрывочной и может работать или не работать, даже если IE7 и 8 (см. их форумы для получения дополнительной информации).