Фон и границы
В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
Необходимые умения: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS). |
---|---|
Цель: | Научиться стилизации фона и границ объектов. |
Стилизация фона в CSS
CSS-свойство background
является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background
в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
.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
):
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top center;
}
Допустимы значения длины и процентные:
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: 20px 10%;
}
Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px;
}
И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
}
Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.
Примечание: background-position
— это сокращение для background-position-x
и background-position-y
, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
Градиент в качестве фона
Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством background-image
.
Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>
. Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.
Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
Несколько фоновых изображений
Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image
запятыми.
Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.
Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.
Другие свойства background- *
также могут иметь значения, разделённые запятыми, как и background-image
:
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
:
.box {
border: 1px solid black;
}
Или мы можем нацеливаться на один край блока, например:
.box {
border-top: 1px solid black;
}
Индивидуальные свойства этих сокращений будут следующими:
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}
И более детально:
.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
}
Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.
Закруглённые углы
Закругление углов блока достигается с помощью свойства border-radius
и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе - вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.
Например, чтобы сделать все четыре угла блока радиусом 10px:
.box {
border-radius: 10px;
}
Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:
.box {
border-top-right-radius: 1em 10%;
}
В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для border-radius
чтобы увидеть доступные варианты синтаксиса.
Упражнение с границами и фоном
Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:
- Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
- Добавить фоновое изображение (используйте URL
balloons.jpg
) и установите размер таким образом, чтобы он покрыл весь блок. - Задайте для
<h2>
полупрозрачный чёрный цвет фона и сделайте текст белым.
Примечание: Вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!
Итоги
В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.
В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?