CSS background-image: градиент • градиент в качестве обоев

1. Градиент не является свойством CSS Линейный градиент и радиальный градиент не являются свойствами...
2. повторяющаяся-линейный градиент
3. Градиент от прозрачного до цветного
4. Анимировать линейный градиент?
5. Старый Синтаксис / Новый Синтаксис
6. Градиент с многоцветным градиентом
7. Градиент / Градиент в Internet Explorer

Градиент не является свойством CSS

Линейный градиент и радиальный градиент не являются свойствами CSS, но являются значениями для background-image , border-image , list-style-image и сгенерированного контента .

История CSS: остановка цвета

Градиент или градиент - это воображаемая линия, на которой лежат остановки цвета. В простейшем случае в курсе есть два цветовых перерыва. На каждой цветовой остановке начинается цвет, который переходит в другой цвет до следующей цветовой остановки.

C2 C1

C1 C2

C1 C2

Второй Цвет Стоп --- + | первая остановка цвета --- + | | | background-image: линейный градиент (вверху, белый 0%, черный 50%) background-image: линейный градиент (вправо, белый 0%, black 50%) background-image: линейный градиент (45deg, белый 0 %, черный 50%) | | первый цвет --- + | второй цвет --- +

Цвета градиента могут быть как Цвет CSS в шестнадцатеричном, rgb, hsl или цветном именах.

Вместо background-image: Gradient , background: Gradient также может использоваться как сокращение. Цвета могут быть указаны как RGB, HSL, шестнадцатеричные значения или как имена цветов.

Остановки цвета указывают в% -ной спецификации, где начинается курс. Для чистого, плавного градиента цветовые точки всегда должны иметь более высокие значения слева направо.

фоновое изображение: линейный градиент (90 градусов, васильковый 0%, пшеница 50%)

повторяющаяся-линейный градиент

Повторяющийся линейный градиент повторяет градиент вместо длинного списка цветовых остановок.

.bar {background-image: повторяющийся линейный градиент (45 градусов, белый 0%, белый 2%, голубой 2%, голубой 4%, белый 4%); }

Жесткие переходы диагоналей возникают из-за того, что цветовые остановки падают на одно и то же место.

Градиент от прозрачного до цветного

С информацией о цвете HSL и RGB курс также ведет из Цвет для прозрачности , Цветовые остановки даются один раз без и один раз с альфа-значением.

rgba (168, 185, 209, 0,9) // RGB с прозрачностью hsla (215, 30%, 70%, 0,9) // HSL с прозрачностью background-image: linear-Градиент (hsla (215.30%, 70%, 0,9) 0%, hsla (215.30%, 70%, 0) 50%, hsla (215.30%, 70%, 0.9) 100%), линейный градиент (справа, hsla (215.30%, 80%, 0,8) 30%, белые 50%, hsla (215,30%, 80%, 0,8) 70%);

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

Анимировать линейный градиент?

Поскольку линейный градиент и радиальный градиент являются не свойствами, а значениями свойства background-image , CSS не может легко анимировать градиенты. Но в конце концов, можно Анимировать CSS-градиент без Javascript или SVG : Анимированная фоновая позиция .

Старый Синтаксис / Новый Синтаксис

Старым браузерам нужен еще один Префикс браузера (-webkit, -moz, -ms, -o) и старый синтаксис. Поскольку линейный градиент является значением background-image , старый синтаксис использовал информацию о положении для background-image (например, вверху слева, внизу справа).

background-image: -webkit-linear-Gradient (вверху слева, белый 0%, # 9FBFD2 100%); background-image: -moz-linear-Градиент (справа внизу, белый 0%, # 9FBFD2 100%);

Современные браузеры обеспечивают стабильный градиент стиля CSS для согласованной истории с единообразным синтаксисом. Вместо указания положения из background-image новый синтаксис устанавливает направление градиента (например, вверху, слева, внизу слева). Указание направления под углом окружности в новом синтаксисе остается прежним.

фоновое изображение: линейный градиент (90 градусов, серебро 25%, красный 75%); Color-Stop Color-Stop Направление типа

Между линейным градиентом и открывающей скобкой не должно быть пробелов или разрывов строк, иначе браузер не будет интерпретировать стиль CSS.

По умолчанию курс проходит вертикально сверху вниз. Минимальная информация - начало и конец цвета.

Фоновое изображение: линейный градиент (белый, черный) Фоновое изображение: линейный градиент (слева, темно-синий, зеленый) Фоновое изображение: линейный градиент (внизу слева, желтый, красный) Фоновое изображение: линейный градиент (0 градусов, желтый 5%, оранжевый 70%) фоновое изображение: линейный градиент (270 градусов, синий 5%, розовый 80%) фоновое изображение: линейный градиент (135 градусов, оливковый 20%, морская ракушка 70%)

Направление градиента изменяется либо по ключевым словам (например, наверх), либо по углу наклона (например, 45 градусов).

Градиент с многоцветным градиентом

Градиент или градиент также обрабатывает больше, чем две цветовые остановки.

Курс может быть дополнен другими остановками цвета - так, кто хочет всю радужную потребность

фоновое изображение: линейный градиент (90 градусов, фиолетовый, синий, зеленый, желтый, красный, фиолетовый);

Если позиция цветовой остановки не указана, браузер автоматически распределяет цветовые остановки по маршруту.

Градиент / Градиент в Internet Explorer

Internet Explorer поддерживает CSS с линейным градиентом версии 10. или выше. Более старые версии IE также могут отображать градиенты, но до версии 9 не в стиле CSS с background-image , а в качестве фильтра .

фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ccc', endColorstr = '# eee');

Фильтры и эффекты Internet Explorer: Введение в фильтры и переходы

Похожие

Комментарии