Чем отличается background от background color

Фон — Основы верстки контента

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

Свойство background является обобщенным для 8 свойств:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

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

Данная особенность влечет за собой также определенные удобства: создавая свой компонент, можно установить нужные свойства через обобщенные свойства. Это позволяет добиться удобного переиспользования background , так как предыдущие свойства не повлияют на наш компонент.

Установка цвета или изображения

Базовой функцией свойства background является установка фонового цвета или фонового изображения. Для этого используются свойства:

• background-color — установка фонового цвета
• background-image — установка фонового изображения или градиента

Для установки цвета может использоваться различная запись: шестнадцатеричная; с помощью функций rgb() , hsl() и других. В конце урока будет оставлена ссылка на сайт, где можно выбрать любой цвет и получить его код для установки в качестве значения свойства background-color

Обратим внимание, что фон может быть установлен как для всей страницы, так и для отдельных ее частей. Например, для выделения слова в предложении. В реальных проектах будут встречаться именно такие, «точечные» установки фона, особенно при использовании градиентов.

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

В качестве значения background-image принимает функцию url() . Похожий принцип используется при подключении шрифтов на страницу.

Может показаться, что результат такой же, как и при использовании тега . Однако есть важное отличие: при использовании background-image изображение не находится в HTML и не участвует в формировании размеров блоков.

В примере выше для блока с классом image установлено не только изображение, но и заданы размеры с помощью свойств width и height . Без них изображение пропадет со страницы, так как, фактически, блок будет являться пустым.

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

Особенность использования background-image заключается в возможности задать сразу несколько фоновых изображений. Для этого достаточно указать их через запятую:

background-image: url("path_to_image_1"), url("path_to_image_2"); 

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

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

CSS позволяет управлять тем, будет ли браузер клонировать изображение, и, если да, то по какому направлению. За это отвечает свойство background-repeat . Оно принимает одно из следующих значений:

• repeat — Значение по умолчанию. Копировать изображение по всем направлениям, пока это позволяет пространство
• repeat-x — Копировать только по горизонтали
• repeat-y — Копировать только по вертикали
• no-repeat — Не копировать
• round — Копировать с возможностью сжатия, чтобы уместить максимальное количество копий. Это значение используется редко, так как приводит к деформации изображения
• space — Копировать максимальное количество изображений без их обрезки. В начале копии располагаются в крайних точках, а потом равномерно располагаются в остальных частях блока. При этом возможны пробелы между копиями

Размер изображения

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

Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:

• Разрешение экрана пользователя
• Адаптивность проекта
• Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части

При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство background-size , которое принимает два значения:

• Ширина изображения
• Высота изображения

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

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

Свойство background-size имеет два зарезервированных значения:

• cover — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
• contain — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение

Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана

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

Еще одно свойство, которое влияет на размер изображения — background-origin . Его действие похоже на свойство box-sizing , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.

Свойство background-origin определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:

• border-box — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
• padding-box — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством border
• content-box — фоновое изображение рисуется не по всему блоку, а по области контента внутри него

Взглянем на пример:

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

Здесь поможет свойство background-clip , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и background-origin , свойство принимает одно из трех значений:

• border-box — обрезать по внешним границам элемента
• padding-box — обрезать по границам внутренних отступов
• content-box — обрезать по границам контента

Еще одно значение — text , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.

Важно: свойство background-clip влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства background-color

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

Осталось два свойства из набора свойства background . Это:

• background-position — позиционирование/расположение фона внутри блока
• background-attachment — прокрутка фона вместе с контентом

По умолчанию все изображения появляются относительно левого верхнего угла блока, но зачастую изображение нужно расположить в другой точке. Для этого используется свойство background-position . Его синтаксис достаточно запутанный, поэтому начать стоит с предустановленных значений, которые покрывают существенную часть задач:

• top — расположить фон в центре и прижать к верхнему краю
• left — расположить фон в центре и прижать к левому краю
• right — расположить фон в центре и прижать к правому краю
• bottom — расположить фон в центре и прижать к нижнему краю
• center — расположить фон в центре

Такое же поведение можно задать, используя значения для координат x и y. Например, чтобы воспроизвести поведение значения top , нужно по оси x указать значение в 50%, а для оси y значение 0 . В качестве единиц измерения можно использовать любые ранее изученные единицы: px , em , % и так далее.

.bg  /* Эквивалентно background-position: top */ background-position: 50% 0; > 

Также в качестве значений для осей x и y можно указывать уже изученные ключевые слова: top , right , bottom , left и center . Это помогает сделать CSS более выразительным и читаемым.

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

Свойство background-attachment позволяет контролировать такое поведение. Для этого устанавливается одно из значений:

• scroll — значение по умолчанию. Фоновое изображение располагается в соответствии со свойством background-position . При этом оно фиксируется в области и не пропадает при скролле контента
• fixed . У этого значения есть хитрость: позиционирование происходит не относительно блока, где было установлено свойство background , а относительно всей страницы целиком. Однако видимо оно будет только в рамках того блока, где был установлен фон. Такое поведение иногда неочевидно, поэтому значение используется редко
• local — изображение фиксируется в определенной точке относительно контента. В примере ниже таким контентом является текст, поэтому фоновое изображение находится ровно по его центру, так как свойство background-position имеет значение center

Порядок записи свойств в background

После изучения всех доступных свойств осталось узнать о том, в каком порядке они записываются в обобщенном правиле background и какие свойства обязательны.

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

Обязательное требование к записи — совместная запись свойств background-position и background-size . Для их записи используется символ / и позиционирование обязательно стоит до размеров. Вот как это выглядит в реальном CSS файле:

.element  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff; > 

В этой записи установлены следующие свойства:

• background-image: url(«../assets/images/hexlet.png»)
• background-position: center
• background-size: 0.5rem
• background-repeat: no-repeat
• background-color: #288cff

Все свойства, которые не указаны, будут приведены в значение по умолчанию, что удобно при создании своих собственных компонентов.

В этом уроке мы познакомились со свойствами, составляющими обобщенное свойство background :

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

В чём разница между background и background-color?

Здравствуйте! Я никак не могу понять разницу между background и background-color, в каких случаях использовать один, а в каких другой? А также не пойму зачем использовать rgb и hsl если можно задавать цвет просто через: #.

• Вопрос задан более трёх лет назад
• 12049 просмотров

Комментировать
Решения вопроса 1
Сергей Соколов @sergiks Куратор тега Веб-разработка

• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background-attachment

Таким образом, background: #F90 полностью эквивалентен background-color: #F90

Например, background: #F90 url(fon.jpg) repeat-x равен

background-color: #F90; background-image: url(fon.jpg); background-repeat: repeat-x;

Цвета – разные цветовые модели бывают удобны для разных задач. Например, в модели HSL легко «гасить» свет, изменяя только его компоненту L (яркость), или только уменьшая насыщенность S. Или получить палитру из нескольких цветов, одинаково ярких-сочных, но равномерно разбросанных по кругу оттенков, равномерно раскидав их H по цветовому кругу, а S и L оставив одинаковыми.

Ответ написан более трёх лет назад
Нравится 18 1 комментарий
seregadushka @seregadushka

красиво отвечено , особенно про HLS , я тоже не представлял, что действительно, по RGB получается мешанина цветов. теперь полезу читать что такое H, S . Получается HLS по 2 координатам , когда RGB по трем (opacity там отдельно) . Конечо, чем меньше координат, тем лучше.

Ответы на вопрос 4

Разница огромная:
background — это целый набор свойств:

background: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif) repeat; background-image: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif); background-position-x: initial; background-position-y: initial; background-size: initial; background-repeat-x: repeat; background-repeat-y: repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial;

Вот эта куча лишнего кода пишется если вы используете просто background. В случае с background-color, просто применяется цвет.

По аналогии с font, вы можете указывать так:

font-family: Arial, Sans-serif; line-height:15px; font-size:19px;

А можете так:
font: Arial 19px/15px;

По поводу rgb, он полезен тем, если вам нужно задать цвет с прозрачностью. Это лучше чем делать opacity у блока.

Фон и границы

В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью 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. Свойство принимает любой допустимый цвет . background-color распространяется на сам контент и отступы от него (padding).

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

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

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

Свойство 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 (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально.

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

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

Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных (en-US) . Поиграть с градиентами вы можете используя один из многих генераторов градиентов 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-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 чтобы увидеть доступные варианты синтаксиса.

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

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

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

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

Итоги

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

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

В этом модуле

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Модель коробки
4. Фон и границы
5. Изменение направления текста
6. Перекрытие содержимого
7. Значения свойств CSS
8. Изменение размеров в CSS
9. Изображения, формы и прочие медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация CSS-кода (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Чем отличается background от background color

Кратко объявляет следующие свойства фона: background-image, background-color, background-repeat, background-attachment, background-position, background-clip, background-origin и background-size.

Не обязательно указывать все перечисленные свойства, так как любое пропущенное свойство примет значение по умолчанию. При включении свойства background-size в сокращенную нотацию, его значения следует разделять прямой косой чертой (/), чтобы отличить его от свойства background-position.

Синтаксис

background: #ffffff; background: url('catfront.png') repeat-x; background: no-repeat center/75% url('/src/assets/product-bg.webp'); background: inherit;

Cвойство background-image

Устанавливает фоновое изображение элемента.

Синтаксис

background-image: none; background-image: url(http://pattern.dev/logo.png); background-image: url(sweettexture.jpg); background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url('catfront.png'); background-image: repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); background-image: initial; background-image: inherit;

Значения

• изображение: Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none.
• initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-color

Задает цвет фона элемента и может быть использовано для создания визуально привлекательного дизайна. Принимает широкий диапазон значений цвета, включая именованные цвета, шестнадцатеричные коды цветов, значения RGB и HSL. Его также можно установить в значение transparent, чтобы сделать фон элемента прозрачным и открыть основное содержимое.

Синтаксис

background-color: #234f81; background-color: hsla(345, 100%, 50%, 0.81); background-color: currentColor; background-color: oklch(81.3% 0.321 149); background-color: initial; background-color: inherit;

Значения

• цвет: Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Cвойство background-repeat

Используется для управления повторением фонового элемента, у которого фоновое изображение задано с помощью свойства background-image. Это свойство определяет, должно ли изображение повторяться, и если да, то в каком направлении.

Синтаксис

background-repeat: repeat-y; background-repeat: repeat; background-repeat: repeat-x; ​​​​​​​background-repeat: space; ​​​​​​​background-repeat: round; ​​​​​​​background-repeat: no-repeat; background-repeat: repeat repeat; background-repeat: repeat space; background-repeat: no-repeat round; background-repeat: round space; background-repeat: initial; background-repeat: inherit;

Значения

• repeat-x: Изображение повторяется по горизонтали. Разрешается как repeat, если присутствует no-repeat.
• repeat-y: Изображение повторяется по вертикали. Разрешается как no-repeat repeat.
• repeat: Изображение повторяется в обоих направлениях столько раз, сколько необходимо для покрытия фоновой области. Если изображение слишком большое, оно обрезается. Это значение по умолчанию.
• space: Изображение повторяется столько раз, сколько возможно без обрезки, с равным расстоянием между изображениями. Первое и последнее изображения касаются краев области. Если область фона больше, чем область позиционирования фона, рисунок повторяется, чтобы заполнить область фона. Если места для двух копий изображения недостаточно, размещается только одно изображение, и его положение определяется свойством background-position. Оно разрешается в space space.
• round: Изображение повторяется столько раз, сколько необходимо для заполнения фоновой области, при необходимости масштабируется без обрезки. Разрешается как round round.
• no-repeat: Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Cвойство background-attachment

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

Синтаксис

background-attachment: fixed; background-attachment: scroll; background-attachment: local; background-attachment: initial; background-attachment: inherit;

Значения

• fixed: Предотвращает перемещение, фиксирует фоновое изображение на заднем план
• scroll: Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
• local: Фоновое изображение прокручивается вместе с содержимым элемента.
• initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-position

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

Свойство так же задает горизонтальное и вертикальное положение фонового изображения относительно границы элемента.

Синтаксис

background-position: bottom; background-position: left; background-position: center; background-position: top; background-position: bottom; background-position: 4% 16%; background-position: 1vmin 2vw; background-position: 8ex 10%; background-position: 2.5em 6em, right; background-position: center 11% left; background-position: top right 10px; background-position: initial; background-position: inherit;

Значения

• %: Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%.
• длина: Значение длины дает фиксированную длину в качестве смещения.
• top: Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
• bottom: Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
• center: Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
• right: Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
• left: Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Если указано только одно значение, второе значение принимается за центр. Если указаны два значения length или %, первое представляет горизонтальное положение, а второе — вертикальное. Значения в единицах длины или % представляют собой смещение верхнего левого угла фонового изображения от верхнего левого угла области компоновки фона.

Пара ключевых слов может быть переупорядочена, а комбинация ключевого слова и длины или процента — нет. Например, center left — допустимое значение, а 50% left — нет.

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

Cвойство background-clip

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

Синтаксис

background-clip: border-box; background-clip: content-box; background-clip: padding-box; background-clip: initial; background-clip: inherit;

Значения

• border-box: Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
• content-box: Фон закрашивает только область содержимого.
• padding-box: Фон закрашивает область в пределах внутренних полей элемента.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Cвойство background-origin

Используется для контроля фонового изображения, у которого фоновое изображение задано с помощью свойства background-image.

Свойство определяет поле, относительно которого позиционируется и обрезается фоновое изображение.

Синтаксис

background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-origin: initial; background-origin: inherit;

Значения

• border-box: Фон позиционируется относительно верхних границ рамки элемента.
• padding-box: Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
• content-box: Фон позиционируется относительно верхних границ области содержимого элемента.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Cвойство background-size

Используется для управления размером фонового изображения внутри элемента, у которого фоновое изображение задано с помощью свойства background-image. Это свойство задает ширину и высоту фонового изображения

Синтаксис

background-size: contain; background-size: cover; background-size: 39%; background-size: 0.6rem; background-size: 12px; background-size: auto; background-size: 3em 25%; background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; background-size: initial; background-size: inherit;

Значения

• auto(значение по умолчанию): Высота и ширина изображения равны его оригинальным размерам.
• фиксированная длина: Размер задается парой значений, где первое значение задает ширину изображения, а второе — высоту. Чтобы фон масштабировался вместе с текстом, размер изображения должен быть задан в единицах em.
• %: Масштабирует изображение пропорционально, чтобы заполнить ширину или высоту блока, в зависимости от того, что меньше.
• cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
• contain: Масштабирует изображение пропорционально, чтобы оно поместилось внутри блока.
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.