Фон и границы
=============

* Назад
* Обзор: Building blocks
* Далее

В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.

| Необходимые умения: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS). |
| --- | --- |
| Цель: | Научиться стилизации фона и границ объектов. |

Стилизация фона в CSS
---------------------

CSS-свойство `background` является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство `background` в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.


```css
.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}
```


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

### Фоновый цвет

Свойство `background-color` определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет `<color>`. `background-color` распространяется на сам контент и отступы от него (padding).

В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу `<span>`.

**Поиграйте с ними, используя любое доступное значение** **<color>.**

### Фоновое изображение

Свойство `background-image` позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.

Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.

**Примечание:** **Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.** Попробуйте добавить свойство `background-color` в приведённый выше пример, чтобы увидеть это в действии.

#### Свойство background-repeat

Свойство `background-repeat` используется для управления повторениями фонового изображения. Доступные значения:

* `no-repeat` — останавливает повторение фонового изображения во всех направлениях.
* `repeat-x` — повторение фонового изображения по горизонтали.
* `repeat-y` — повторение фонового изображения по вертикали.
* `repeat` — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

**Попробуйте эти значения в примере ниже. Мы установили значение `no-repeat`, поэтому вы видите только одну звезду. Попробуйте разные значения -** **`repeat-x`** **и** **`repeat-y`** **—** **чтобы увидеть, какие эффекты они оказывают.**

#### Изменение размеров фонового изображения

В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство `background-size`, которое может принимать значения длины или в процентах, чтобы размер изображения соответствовал размеру фона.

Вы также можете использовать ключевые слова:

* `cover` — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
* `contain` — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.

Попробуйте следующее.

* Измените значения длины, используемые для изменения размера фона.
* Измените значение длины на `background-size: cover` или `background-size: contain`.
* Если ваше изображение меньше размеров блока, вы можете изменить значение свойства `background-repeat`, чтобы повторить изображение.

#### Позиционирование фонового изображения

Свойство `background-position` позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой *левый верхний угол* блока равен `(0,0)`, а сам блок располагается вдоль горизонтальной (`x`) и вертикальной (`y`) осей.

**Примечание:** По умолчанию значение `background-position` равно `(0,0)`.

Обычно свойство `background-position` задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как `top` и `right` (с остальными можете ознакомиться на странице `background-position`):


```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
```


Допустимы значения длины и процентные:


```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
```


Вы также можете смешивать значения ключевых слов с длинами или процентами, например:


```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}
```


И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:


```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
```


**Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.**

**Примечание:** `background-position` — это сокращение для `background-position-x` и `background-position-y` (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально.

### Градиент в качестве фона

Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством `background-image`.

Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных `<gradient>` (en-US). Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.

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

### Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства `background-image` запятыми.

Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.

**Примечание:** Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства `background- *` также могут иметь значения, разделённые запятыми, как и `background-image`:


```css
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;
```


Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение `background-repeat` для `image1` будет `no-repeat`. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения `background-position`. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - `image3` будет присвоено первое значение позиции, а `image4` будет присвоено второе значение позиции.

**Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.**

### Закрепление фона

Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства `background-attachment`, которое может принимать следующие значения:

* `scroll`: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
* `fixed`: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
* `local`: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение `scroll` довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение `local` фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство `background-attachment` действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).

### Использование сокращённого свойства background

Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства `background`. Это сокращение позволяет вам одновременно устанавливать все различные свойства.

При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением `no-repeat` и положением, затем цвет.

При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:

* `background-color` можно указывать только после последней запятой.
* Значения `background-size` могут быть включены только сразу после `background-position`, разделённые символом '/', например: `center/80%`.

Посетите страницу MDN свойства `background`, чтобы увидеть полное описание.

### Доступность просмотра

Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать `background-color`, который позволит тексту быть разборчивым, если изображение не загружается.

Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.

Границы
-------

Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.

Мы можем установить границу для всех четырёх сторон блока с помощью `border`:


```css
.box {
  border: 1px solid black;
}
```


Или мы можем нацеливаться на один край блока, например:


```css
.box {
  border-top: 1px solid black;
}
```


Индивидуальные свойства этих сокращений будут следующими:


```css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```


И более детально:


```css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}
```


**Примечание:** Свойства границ top, right, bottom, и left также имеют сопоставленные *логические* свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

**Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.**

### Закруглённые углы

Закругление углов блока достигается с помощью свойства `border-radius` и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе - вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.

Например, чтобы сделать все четыре угла блока радиусом 10px:


```css
.box {
  border-radius: 10px;
}
```


Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:


```css
.box {
  border-top-right-radius: 1em 10%;
}
```


В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для `border-radius` чтобы увидеть доступные варианты синтаксиса.

Упражнение с границами и фоном
------------------------------

Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:

1. Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
2. Добавить фоновое изображение (используйте URL `balloons.jpg`) и установите размер таким образом, чтобы он покрыл весь блок.
3. Задайте для `<h2>` полупрозрачный чёрный цвет фона и сделайте текст белым.

**Примечание:** вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

Итоги
-----

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

В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

* Назад
* Обзор: Building blocks
* Далее