CSS-градиент не отображается

0

Я работаю над проектом, в котором я должен применить линейный градиент к телу страницы. Градиент просто не отображается на странице.

Сначала я подумал, что проблема связана с ошибкой в моем коде (хотя браузер не обнаружил синтаксическую ошибку), но он не работает ни с примером кода из документации, ни с помощью генератора градиентов. Вот мой код CSS теперь (предоставляется генератором):

body
{
    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}

И... фон тела просто невидим. Проблема возникает не из кода html, так как когда я меняю CSS на что-то вроде:

body
{
    background: #ff0000;
}

или с фоновым изображением он работает... Конечно, я пробовал на разных машинах, с разными браузерами от последних до старых, но никто не работал. Я действительно не знаю, что происходит, но это делает меня безумным: все работает, кроме градиентов, и консоль ошибок не показывает никаких ошибок; я думаю, я пробовал все, что знал, но я все еще застрял. Спасибо за помощь.

РЕДАКТИРОВАТЬ:

Вот полный код:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>test</p>
    </body>
</html>

style.css

body
{
    margin: 0;
    padding: 0;
    font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4E443C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);

    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}

Как это выглядит в firefox 25.0.1:

Изображение 174551

EDIT 2:

В Firebug у меня есть это:

Изображение 174551

Это означает, что градиент вычисляется браузером... но явно не отображается...

  • 0
    вы никогда не получите ошибку в веб-разработке
  • 3
    Работающий jsfiddle.net/kpAFL - @ibi0tux ibi0tux
Показать ещё 5 комментариев
Теги:
gradient
linear-gradients

3 ответа

2

Я заметил, что установка градиента на теле, если он имеет margin 0, не работает.

body
{
    margin:0;
    background:linear-gradient(45deg,red,blue);
}

Но установка height:100% на html делает ее рендеринга правильно. Надеюсь, поможет.

html
{
    height:100%;
}
Поделиться
  • 1
    3 года и 2 месяца спустя ... к счастью, я больше не застрял на этом, но спасибо за ваш ответ! : D
  • 0
    хаха, да, я заметил возраст сообщения ПОСЛЕ ответа, но решил, что кому-то еще это может понадобиться!
0

У меня было что-то подобное со мной. Казалось, у меня тоже был градиент на заднем плане.

html
{
    background: linear-gradient(rgb(36, 36, 36), rgb(82, 82, 82));
}

Кажется, что и этот градиент, и градиент кнопки означает, что кнопка теряет. Я все еще пытаюсь понять, как это исправить, так что оба ведут себя.

Поделиться
0

Очевидно, код, который вы предоставили, работает, как сказал @NathanLee. Однако проблема связана с вашим браузером. Поэтому убедитесь, что ваш браузер поддерживает градиенты

Поделиться
  • 0
    Я пытался под Firefox 25, Firefox 3.6 (старый синтаксис) и Safari, но безуспешно ... я не понимаю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню