Стили фона и
градиента
В CSS имеются свойства, которые работают с фоном HTML-документа и элементов документа:
|
Свойство CSS |
Описание |
|
background-color |
Добавляет цвет фона на страницу или к
определенному элементу. |
|
background-image |
Указывает картинку, которая будет отображаться
в качестве фонового изображения для всей страницы или для отдельного элемента. |
|
background-repeat |
Отвечает за повтор фонового изображения.
Имеет значения: · no-repeat -
фоновое изображение не повторяется;
· repeat - фоновое изображение занимает все
доступное пространство, повторяясь по горизонтали и вертикали (является
значением по умолчанию). |
|
background-position |
Если фоновое изображение не
повторяется или должно повторяться с определенного места, то это
свойство указывает, в каком месте окна браузера или элемента оно должно быть
размещено. Принимает значения: left, top, center, right и bottom.
Можно использовать любую комбинацию этих значений: · top left
· bottom left Если будет указано только одно значение, то по
умолчанию вторым значением будет center.
Также можно использовать в качестве значений пиксели или проценты. Они
определяют расстояние от верхнего левого угла окна браузера (или
элемента-контейнера). Верхний левый угол соответствует значению 0% 0%. |
|
background-attachment |
Устанавливает, будет ли фоновое изображение
прокручиваться вместе с содержимым элемента. Имеет значения: · scroll -
фоновое изображение фиксируется по отношению к самому элементу и не
прокручивается вместе с его содержимым.
· local - фоновое изображение
прокручивается вместе с содержимым элемента. |
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Фон документа и элемента</title>
<style>
body {
background-color: #333;
background-image: url('./image/detective1.png');
background-repeat: no-repeat ;
}
.str {
background-color: #fff;
width: 50%;
margin: 10px 200px 20px 200px;
color: #333;
}
</style>
</head>
<body>
<p
class="str">ДЕТЕКТИВ</p>
</body>
</html>
Можно получить тот же самый результат, что и в предыдущем примере,
но с меньшим количеством строк кода, используя свойство background, которое позволяет установить значения
свойств background-color, background-image, background-repeat, background-attachment и background-position в
объявлении всего одного свойства:
background: #333 url('./image/detective1.png') no-repeat
;
Градиент -
заполнение выделенной области последовательностью цветовых оттенков с плавными
переходами между ними. Градиент используется для отображения плавного перехода
между двумя или более указанными цветовыми оттенками. Пример градиента:
CSS градиент
является фоновым изображением, создаваемым браузером, и определяется как
значение свойств background-image, list-style-image и background.
CSS3 определяет два
типа градиентов:
Линейный градиент (Linear Gradient) - плавный
переход от цвета к цвету по прямой линии.
Радиальный градиент (Radial Gradient) - плавный
переход от цвета к цвету из одной точки во все направления.
Линейный
градиент создаётся с помощью функции linear-gradient(). Функция создаёт
изображение, которое представляет собой линейный градиент между указанными
оттенками цветов. Размер градиента соответствует размеру элемента, к которому
он применён.
Аргументы
функции linear-gradient() можно задавать
следующими способами:
1. В качестве аргументов
задаются только HTML-цвета (переход
цветов будет сверху вниз). Пример:
|
Код |
Результат в браузере |
|
div { background-image:
linear-gradient(black, green, red); width: 200px; height: 200px; } |
|
2. В качестве первого аргумента можно передать
градус угла линии градиента, определяющий направление градиента. Угол 0deg (deg сокращение от англ degree -
градус) определяет линию градиента от нижней границы элемента к верхней,
угол 90deg определяет линию градиента слева направо и т.д. Проще
говоря, положительные углы представляют собой вращение по часовой стрелке,
отрицательные соответственно против часов. Следующие аргументы функции
являются HTML-цвета. Пример:
|
Код |
Результат в браузере |
|
div { background-image:
linear-gradient(90deg,black, green, red); width: 200px; height: 200px; } |
|
3. В качестве первого аргумента могут также
передаваться ключевые слова to top, toright, to bottom или to left, они
представляют собой углы линий градиентов 0deg, 90deg, 180deg, 270deg соответственно. Угол можно так же задать с
помощью двух ключевых слов, например, to top right - линия градиента
направлена в верхний правый угол. Пример:
|
Код |
Результат в браузере |
|
div { background-image:
linear-gradient(90deg,black, green, red); width: 200px; height: 200px; } |
|
4. После цвета допускается указывать стоп позицию
для него, которая определяет месторасположение цвета (где один цвет начинает
переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция
указывается с помощью единиц измерения поддерживаемых в CSS или
с помощью процентов. При использовании процентов, расположение стоп позиции
вычисляется в зависимости от длины линии градиента. Значение 0% является
начальной точкой градиента, 100% - конечной. Пример:
|
Код |
Результат в браузере |
|
div { background-image: linear-gradient(to right bottom, yellow
10%, white, red, black 90%); width: 200px; height: 200px; } |
|
Радиальный градиент распространяется из центральной точки градиента
во все стороны в форме круга или эллипса (форма по умолчанию), демонстрируя
плавный переход от одного оттенка цвета к другому. Радиальный градиент создаётся
с помощью функции radial-gradient(). Функция создаёт
изображение, которое представляет собой радиальный градиент между указанными
оттенками цветов. По умолчанию размер градиента соответствует размеру элемента,
к которому он применён.
Функция radial-gradient() принимает следующие аргументы:
1. В качестве
аргументов задаются только HTML-цвета (переход
цветов будет сверху вниз). Пример:
|
Код |
Результат в браузере |
|
div { background-image:
radial-gradient(cyan, indigo); width:
200px; height: 200px; } |
|
2. Как и в случае использования линейных
градиентов, радиальный градиент может включать список более чем из двух цветов,
и к любому цвету можно указать стоп позицию. Пример:
|
Код |
Результат в браузере |
|
div { background-image: radial-gradient(cyan, yellow 10%, indigo
30%, white 50%); width:
200px; height: 200px; } |
|
3. Форму радиального градиента можно определить с
помощью ключевых слов circle(круг) и ellipse (эллипс), указав одно из них в качестве
первого аргумента.
4. По умолчанию браузер
располагает центральную точку радиального градиента в центре элемента. Центр
градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в
указанных единицах измерения CSS. Пример:
|
Код |
Результат в браузере |
|
div { background-image:
radial-gradient(circle at 300px 50px, cyan, indigo, yellow); width:
200px; height:
200px; } |
|
5. Размер градиента (на сколько большой
должна быть конечная форма градиента), можно определить с помощью одного из
четырёх ключевых словосочетаний:
|
closest-side |
Конечный размер градиента зависит от расстояния между центром
градиента и ближайшей к нему стороной элемента (для круга) или от расстояния
между центром и двумя ближайшими к нему сторонами элемента (для эллипса). |
|
|
closest-corner |
Конечный размер градиента зависит от расстояния между центром
градиента и ближайшим к нему углом элемента. |
|
|
farthest-side |
Конечный размер градиента зависит от расстояния между центром
градиента и самой дальней от него стороны элемента (для круга) или от
расстояния между центром градиента и двумя самыми дальними от него сторонами
(для эллипса). |
|
|
farthest-corner |
Конечный размер градиента зависит от расстояния между центром
градиента и самым дальним от него углом элемента. Используется по умолчанию
для формы круга или эллипса. |
|
или указания радиуса с помощью единиц измерения CSS (для
определения радиуса нельзя использовать проценты). Пример:
|
Код |
Результат в браузере |
|
div { background-image:
radial-gradient(circle closest-side, cyan, red,
indigo); width:
200px; height: 200px; } |
|
|
div { background-image:
radial-gradient(circle closest-corner at 100px, cyan 50%,
indigo); width:
200px; height: 200px; } |
|
