English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Функция CSS linear-gradient() создает изображение, представляющее линейный градиент цвета. Результатом является объект типа <gradient>, являющийся особой формой <image>.
Ниже приведен пример линейного градиента от головы до низа, начинающегося с красного, переходящего в желтый, затем в синий:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>Линейный градиент - от головы до низа</h3>
<p>Линейный градиент от головы до низа, начинающийся с красного, переходящий в желтый, затем в синий:</p>
<div id="grad1"></div>
<p><strong>Внимание:</strong> Браузеры Internet Explorer 9 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›Функция linear-gradient() используется для создания "изображения" линейного градиента.
Для создания линейного градиента вам нужно установить точку начала и направление градиента (указанное углом), а также определить终止ный цвет. Терминальный цвет - это цвет, к которому Gecko будет плавно переходить, и вы должны указать至少 два, хотя можно указать и больше цветов для создания более сложного градиента.
Поддерживаемые версии: CSS3
Числа в таблице представляют собой первую версию браузера, поддерживающую эту функцию.
Числа, указанные в таблице, являются первой версией браузера, поддерживающего эту функцию, перед префиксом "webkit" или "moz" или "o".
| Функция | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
| Значение | Описание |
|---|---|
| direction | Указать направление градиента (или угол) с помощью значения угла. |
| color-stop1, color-stop2,... | Используется для указания начальных и конечных цветов градиента. |
Следующий пример демонстрирует линейный градиент, начинающийся с левого края, от красного к желтому:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Не поддерживается линейный градиент */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h3>Линейный градиент - Слева направо</h3>
<p>Линейный градиент, начинающийся с левого края. Начало — красный, постепенно переходящий к желтому：</p>
<div id="grad1"></div>
<p><strong>Внимание:</strong> Internet Explorer 8 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›Следующий пример демонстрирует линейный градиент от верхнего левого угла до нижнего правого угла:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Не поддерживается линейный градиент */
background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>
<h3>Линейный градиент - Крайние углы</h3>
<p>Линейный градиент, начинающийся в верхнем левом углу (и доходящий до нижнего правого угла). Начало — красный, постепенно过渡ящийся к желтому：</p>
<div id="grad1"></div>
<p><strong>Внимание:</strong> Internet Explorer 8 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›Следующий пример демонстрирует линейный градиент, указанный с определенным углом:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* Показывается, если браузер не поддерживает */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* Показывается, если браузер не поддерживает */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* Показывается, если браузер не поддерживает */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* Показывается, если браузер не поддерживает */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>Линейный градиент - Использование различных углов</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>Внимание：</strong> Internet Explorer 9 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›Ниже приведен пример с несколькими конечными цветами:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 55px;
background-color: red; /* Показывается, если браузер не поддерживает */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Стандартная грамматика (должна быть放在 последнем) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Фон с градиентом
</div>
<p><strong>Внимание:</strong> Internet Explorer 8 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›Ниже приведен пример, который использует прозрачность:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>Линейный градиент - Прозрачность</h3>
<p>Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых узлов. Последний параметр функции rgba() может быть значением от 0 до 1 и определяет прозрачность цвета: 0 означает полностью прозрачный, 1 означает完全不 прозрачный.</p>
<div id="grad1"></div>
<p><strong>Внимание:</strong> Internet Explorer 8 и более ранние версии не поддерживают градиенты.</p>
</body>
</html>Проверьте ‹/›CSS учебник: CSS3 градиент