CSS3 градиенты не работают ни в одном браузере

Я изучал интернет в течение 2 дней и не смог найти ответ на свою проблему: линейный градиент CSS не работает ни в моем коде, ни в любом браузере. Я видел градиенты в скрипках, которые работают, и на других сайтах, которые работают. Я даже пытался скопировать и вставить их код в мой, и он не работает. Я получаю только простой цвет фона для моего запасного варианта. Я даже трижды проверил орфографию, чтобы убедиться, что что-то не является ошибкой PEBCAK... Когда я пытался поместить свой код в скрипку, он все равно не работал. Я в тупике... кто-нибудь видит, что я делаю не так?

Мой исследовательский след начался с ответа, который объяснял, что градиентам нужна высота, поэтому я обнаружил хитрость для тела, чтобы установить минимальную высоту. Затем я увидел, что у большинства людей есть градиенты в div, поэтому я добавил тестовый div, чтобы попробовать его с установленной высотой 100px. Ничего не сработало. Вот мой текущий тестовый код:

Мой HTML:

<body>
<div>

    <div class="gradient">
        This is a test
    </div>

</div>
</body>

CSS:

*, html {
margin:0;
padding:0;
font-family:Calibri;
}

body {
min-height: 100vh;
background: #64647f;
background: linear-gradient (to bottom, #64647f 0%, #b2b2c2 20%);
}

.gradient {
border: 1px solid black;
height: 100px;
background: linear-gradient (red, yellow);
}

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

Да, я знаю, что это не обратно совместимо, я доберусь до того, как смогу заставить его работать нормально для себя. Я использую Chrome версии 50.0.2661.75 m для Windows 10. Я также протестировал его в IE (Edge) и Firefox... даже намека на градиент не видно. Я даже попробовал префикс -webkit- для Chrome, просто чтобы посмотреть, сработает ли это... без игры в кости.

Вот скрипка с указанным кодом для любого, с кем можно поиграть: https://jsfiddle.net/e0p48ubf/2/

Источник

2 ответа

Решение

Я королева всех пользователей PEBCAK прямо сейчас... Спасибо, Гарри, за указание на мою проблему:

Правильный синтаксис - линейный градиент (...) <- примечание, пробел между градиентом и (

Я опускаю голову от стыда... Еще раз спасибо, Гарри!

Источник

Вам нужно удалить пробел после объявления градиента и начала скобок.

фон: линейный градиент (снизу, #64647f 0%, #b2b2c2 20%);

фон: линейно-градиентный (красный, желтый);

Источник
Другие вопросы по тегам