градиентный фон не работает в Chrome с -webkit-градиентом - PullRequest
Новая
       21

градиентный фон не работает в Chrome с -webkit-градиентом

1 голос
/ 21 декабря 2010

Привет всем,

Я использую градиентный фон с -webkit-градиентом. Он не работает на Chrome 8.0.552.224 на Windows 7, но я могу поклясться, что он недавно работал на Chrome-OS X. Это понедельник, так что, возможно, я упускаю что-то очевидное, но если так, я не могу понять это. Буду признателен за ваш взгляд. Пример кода здесь будет работать в Firefox, но не отображает градиент в Chrome:

Спасибо, -Northk 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gradient test </title>
    <style>
        .main-header
        {
            padding-top: 50px;
            min-height: 50px;
            background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
            background: -moz-linear-gradient(top, #fff, #000);
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="main-header">
        THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
    </div>
</body>
</html>

Ответы [ 3 ]

3 голосов
/ 21 декабря 2010

Кажется, я неправильно понял синтаксис. Вот как это должно быть: 

   background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
2 голосов
/ 21 января 2012

Имейте в виду, что в Chrome 16.0.912.75m все еще есть небольшая ошибка CSS / проблема при синтаксическом анализе стиля: 

background:-webkit-linear-gradient  (top,gray 0,#A0A0A0 100%);

Это не будет работать из-за пробелов между -webkit-linear-Gradient и начальным скобками,Удаление дополнительных пробелов решит проблему, а также минимизирует CSS.

1 голос
/ 10 июля 2013

Попробуйте это 

background: -webkit-linear-gradient(#DDDDDD, #ffffff);
...