CSS-градиент в теле, но не во всю длину с запасным вариантом

Question

Я знаю, что вы можете установить градиент для определенной высоты в теге body.

Итак, у меня есть фон моего тела, который имеет синий градиент для высоты 300px, а затем продолжает с простого белого.

Но я хочу иметь запасной вариант для этого градиента для старых браузеров, как я могу убедиться, что эти 300px будут иметь простой синий цвет, а затем белый в старых браузерах, которые не поддерживают градиенты css3?

Answer 1

Ответ Лоренса работает, но если вы не хотите вводить дополнительные элементы, не имеющие семантического значения, вы можете сделать фон html белым и задать для body высоту 300 пикселей.

html {
   background: white}
body {
   margin:0;
   padding:8px;
   max-height:300px;
   overflow:visible;
   background:blue;
   background:linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

Answer 2

сначала установите стиль для старых браузеров, затем добавьте его для браузеров с поддержкой css3:

#div{
    background: blue;
    background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

Отклонится до синего, если градиенты не поддерживаются.

edit: Kinda неправильно прочитал ваш вопрос.

Я думаю, что самое простое решение - добавить белый цвет к тегу body, а затем добавить синюю равнину / градиент в div, вложенный в этот тег body.

Надеюсь, это поможет

Answer 3

попробуйте

.cssgradients 
{
background: /* CSS Gradiant */
}

.no-cssgradients
{
background: /* link 1px by 300px blue background */ top left repeat-x;
 /* more */
}

Answer 4

Если вы включите modernizr на своей странице, вы сможете настраивать стили css3 для браузера, который их поддерживает, ваш тег body получит класс в зависимости от того, поддерживает браузер градиенты css3 или нет, и Вы можете стилизовать соответственно.

.cssgradients 
{
background: /* CSS Gradiant */
}

.no-cssgradients
{
background: /* link to 1px by 300px blue background */ top left repeat-x;
}