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

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

Мой 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/

-1
SetsunaMH 21 Апр 2016 в 17:47

2 ответа

Лучший ответ

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

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

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

0
SetsunaMH 21 Апр 2016 в 14:55

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

Фон: linear-gradient (вниз, # 64647f 0%, # b2b2c2 20%);

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

0
Duckful 21 Апр 2016 в 14:55