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

Question

Есть ли способ иметь диагональный градиент в 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 это не работает.

Answer 1

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

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

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

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

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

И 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');
}

Обновление

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

Answer 2

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

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

Answer 3

Я нашел эти интересные статьи, возможно, если вы прочитаете их и поразмышляете с ними, у вас получится:)

1. http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
2. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
3. http://weston.ruter.net/projects/css-gradients-via-canvas/