Свойства background css: background-clip — CSS | MDN

сокращенная запись — учебник CSS

Как вы заметили из предыдущих уроков, для стилизации фона в CSS существует большое количество свойств. И если вам нужно указать сразу несколько из них, рекомендуем использовать свойство background — это сокращенная запись, которая принимает множество значений и освобождает от необходимости писать каждое свойство для фона по отдельности (что, кстати, довольно долго и неудобно).

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

• background-image
• background-position
• background-size (CSS3)
• background-repeat
• background-attachment
• background-origin (CSS3)
• background-clip (CSS3)
• background-color

Порядок написания значений может быть произвольным — браузер сам определит соответствие свойств и значений. Но для схематичного пояснения мы используем последовательность из спецификации CSS:

Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша /.

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

background по умолчанию следующие:

background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;

Для примера запишем стиль через свойство background, определив только цвет фона (background-color) и порядок его обрезки (background-clip):

background: content-box #aaa;

Этот код эквивалентен такому коду:

background-image: none; /* осталось по умолчанию */
background-position: 0% 0%; /* осталось по умолчанию */
background-size: auto; /* осталось по умолчанию */
background-repeat: repeat; /* осталось по умолчанию */
background-attachment: scroll; /* осталось по умолчанию */
background-origin: content-box;
background-clip: content-box;
background-color: #aaa;

Здесь мы отметили те свойства, которые не изменились при написании сокращенной записи. И, наверное, вы уже видите, что свойство background-origin приняло такое же значение, как и

background-clip, хотя мы вроде как не собирались его менять. Дело в том, что для background-origin и background-clip используются одинаковые ключевые слова — content-box, padding-box, border-box. И если указать только одно из этих ключевых слов в свойстве background, то оно будет применено сразу к двум свойствам. Если же вам понадобится указать разные значения для background-origin и background-clip, запишите их рядом через пробел, как показано на схеме выше (здесь важна последовательность — сначала идет значение background-origin, затем — background-clip ).

Влияние каскадности на свойства

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

Допустим, мы написали следующий код:

background-color: blue;
background: url(img/cat-transparent-bg.png) no-repeat;

Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство background перезаписало первое значение background-color на значение по умолчанию (т. е. на transparent). Решить проблему можно, поменяв местами строки:

background: url(img/cat-transparent-bg.png) no-repeat;
background-color: blue;

А теперь мини-задача: если в последней строке этого кода заменить свойство background-color: blue на упрощенное свойство background: blue, как вы думаете, что произойдет с фоновым рисунком и значением no-repeat?

Рекомендации по использованию сокращенного свойства

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

Кроме того, если вам потребуется писать стили с учетом поддержки браузера Internet Explorer 8 (или более ранних версий), а в свойстве background у вас будут содержаться значения для свойств CSS3, то браузер не сможет считать их и полностью проигнорирует свойство background. Поэтому свойства из CSS3 рекомендуется записывать по отдельности.

---

Далее в учебнике: устанавливаем несколько фоновых рисунков для элемента.

background | CSS | WebReference

• Содержание
  • Краткая информация
  • Синтаксис
  • Значения
  • Пример
  • Спецификация
  • Браузеры

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

Значение по умолчанию	transparent || none || repeat || scroll || 0% 0%
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, неумеренно применяет культурный рельеф. Суша морей начинает туристический подземный сток. Дождливая погода дегустирует кандым. Винный фестиваль проходит в приусадебном музее Георгикон, там же беспошлинный ввоз вещей и предметов в пределах личной потребности связывает белый саксаул. Санитарный и ветеринарный контроль оформляет городской Гвианский щит.</div> </body> </html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> body { background: url(/example/image/hand.png) repeat-y, url(/example/image/bg-right.png) repeat-y 100% 0, #fc0; } </style> </head> <body> </body> </html>

Объектная модель

Объект.style.background

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2. 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

один фон	4	12	1	3.5	1	1
несколько фонов	9	12	1	10.5	1.3	3.6

один фон	2.1	1	10	3.2
несколько фонов	2.1	1	10	3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Цвет и фон

См. также

• background-attachment
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• Линейный градиент
• Несколько фоновых картинок
• Спрайты
• Установка фона и градиента
• Фоновая картинка

Рецепты

• Как вместо символа маркера использовать картинку?
• Как добавить две фоновые картинки к одному элементу?
• Как добавить рисунок к внешним ссылкам?
• Как изменить цвет кнопки?
• Как изменить цвет ссылки при наведении?
• Как размыть фоновую картинку?
• Как указать язык сайта по ссылке?

Практика

• Атрибут style
• Полупрозрачный фон
• Сокращённое значение цвета
• Фоновая картинка
• Цвет в RGB
• Цвет фона таблицы
• Цвет фона у ссылок
• Шестнадцатеричный цвет

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18. 03.2018

Редакторы: Влад Мержевич

фон · WebPlatform Docs

Резюме

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

Свойства background- обеспечивают основные стили элемента, такие как цвет, изображение и положение. CSS3 добавляет больше свойств для обработки фона, в том числе свойства, которые улучшают работу мобильного Интернета. Многие свойства фона CSS могут быть установлены одновременно с этим свойством фона.

Обзорная таблица

Исходное значение

[[Начальное значение:: см. отдельные свойства: * background-color * background-position * background-size * background-repeat * background-attachment * background-clip * background-origin * background-image]]

Применяется к

все элементы

Унаследовано

Нет

СМИ

визуальный

Расчетное значение

см. отдельные свойства

Анимируемый

Нет

Свойство объектной модели CSS

фон

Проценты

см. отдельные свойства

Синтаксис

• фон: <вложение>
• фон:
• фон: {1,2}
• фон:
• background: [ / ]?
• фон:

Значения

Любое из значений, доступных для свойства background-image . Значение по умолчанию нет .

<позиция> [ / ]?

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

<стиль повтора>

Любое из значений, доступных до background-repeat свойство. Значение по умолчанию — , повторите .

<вложение>

Любое из значений, доступных для свойства background-attachment . Значение по умолчанию — прокрутки .

<ящик>{1,2}

Если присутствует одно значение , оно устанавливает оба параметра background-origin и background-clip в это значение. Если присутствуют два значения, то первое устанавливает background-origin и второй фоновый клип .

Для background-clip действительные значения доступны для свойства background-clip . Значение по умолчанию — border-box . Для background-origin действительные значения доступны для свойства background-origin . Значение по умолчанию — padding-box .

<цвет>

Любое из значений, доступных для свойства background-color . Значение по умолчанию – 9. 0014 прозрачный .

Примеры

Свойству background присваивается цвет #f06 в элементе p.

 р {
    фон: #f06;
}
 

Просмотреть живой пример

Для тела задано только одно свойство фона. Для элемента p задано множество индивидуальных свойств, в том числе фоновое изображение, которое отображается только для элемента p.

 корпус {
    фон: #90ee90;
    семейство шрифтов: «Горький»;
}
p {фон: URL(/logo/wplogo_transparent_xlg.png)
                40% / 20 эм.
                #ffffe0
                круглый
                исправлено
                бордюр-бокс;
}
 

Просмотреть живой пример

Использование

 Свойство background — это сокращенное свойство, которое может устанавливать почти все свойства background. В спецификации есть примеры того, как использовать сокращенное свойство и во что оно транслируется.
 

Примечания

Фон корневого элемента становится фоном холста и распространяется на весь холст, но только для этого элемента. Например, см. [1].

Связанные характеристики

Уровень CSS 3

Рекомендация кандидата

CSS уровень 2 (редакция 1)

Рекомендация

См. также

Статьи по теме

Макет CSS

• Адаптивный веб-дизайн

• @импорт

• самовыравнивание

• фон

• декорация коробки

• коробка-гибкая

• бокс-линии

• коробчатый

• коробка

• коробка-тень

• обрыв перед

• flex-align

• flex-item-align

• flex-line-pack

• сетка-авто-строки

• столбцы определения сетки

• ряды определения сетки

• высота

• максимальная ширина

• изменение пользователем

• базовый сдвиг

Фон

• Фон

• фон

• фоновое приложение

• фоновый режим наложения

• фоновая клипса

• цвет фона

• фоновое изображение

• фон-происхождение

• фоновая позиция

• фоновая позиция-x

• фоновая позиция-y

• повтор фона

• размер фона

• JavaScript-анимация

Другие статьи

• Использование нескольких фонов
• CSS_background_images

Внешние ресурсы

• Фоны в CSS: все, что вам нужно знать, Майкл Мартин
• Сокращение фона CSS для мобильных браузеров WebKit, Стивен Томас
• Простые адаптивные изображения с фоновыми изображениями CSS, Стивен Томас
• Всего лишь одна из тех странных вещей о CSS: фон на теле, Крис Койер
• фон, Крис Койер

• Начинающие
• Концепции
• HTML
• УСБ
• Доступность
• JavaScript
• ДОМ
• СВГ

Начало работы с фоном CSS

Главная/Блог/Учебное пособие по CSS: Начало работы с фоном CSS

10 сентября 2021 г. — чтение 8 мин. стилизация текста документов, анимация и веб-разработка. Существует множество различных свойств CSS, которые мы можем использовать для управления и настройки наших веб-страниц. Фон CSS — одно из таких свойств. Мы можем использовать свойство фона CSS, чтобы установить цвета фона, изображения, размеры и многое другое. Сегодня мы собираемся обсудить это полезное свойство CSS и изучить все различные вещи, которые мы можем с ним делать.

Начнем!

Мы рассмотрим :

• Что такое фон CSS?
• Фоновое изображение CSS
• Цвет фона
• Размер фона
• Фоновое положение
• Повтор фона
• Фоновое приложение
• Фоновый градиент
• Подведение итогов и следующие шаги
  

Что такое фон CSS?

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

Фон CSS позволяет нам управлять многими свойствами фона, такими как:

• Цвет
• Размер
• Позиция
• Повторить
• Приложение

• Градиент
• Изображение
• Непрозрачность
• и т. д.

Существует обширная поддержка браузера для фона CSS. Поддерживается следующими браузерами:

• Хром
• Край
• Фаерфокс
• Internet Explorer
• Опера
• Сафари

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

Мы можем использовать свойство background-image для установки фоновых изображений для различных элементов. Современные браузеры поддерживают различные типы файлов изображений, такие как JPG, PNG, IMG, GIF и SVG. Мы также можем установить резервный цвет, который будет отображаться в случае, если наше изображение не загрузится или наш браузер не поддерживает наш тип файла изображения.

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

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

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

Если мы хотим установить резервный цвет, мы можем использовать следующий код:

Цвет фона

Свойство background-color позволяет нам применять сплошные цвета в качестве фона для элементов. Существуют различные значения свойств, которые мы можем использовать для управления аспектами цвета фона. Эти значения включают:

• цвет : Это значение указывает цвет фона. Мы можем выбрать из списка значений цвета CSS, чтобы выбрать точные цвета, которые мы хотим использовать.

• непрозрачность : Это значение определяет прозрачность элемента.

• прозрачный : Это значение указывает, что цвет фона прозрачный.

• начальный : для свойства будет установлено значение по умолчанию.

• наследовать : свойство будет унаследовано от родительского элемента.

Мы также можем установить разные цвета фона для разных элементов. Вот пример:

Мы также можем использовать число от 0.0 до 1.0 , чтобы установить непрозрачность нашего фонового цвета. Чем меньше число, тем прозрачнее цвет. Рассмотрим пример:

Размер фона

Свойство background-size позволяет указать размер фонового изображения.

Положение фона

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

• слева вверху : Фоновое изображение будет начинаться слева вверху.
• слева внизу : Фоновое изображение будет начинаться слева внизу.
• слева от центра : Фоновое изображение будет начинаться слева от центра.
• справа вверху : Фоновое изображение будет начинаться справа вверху.
• справа внизу : Фоновое изображение будет начинаться справа внизу.
• справа по центру : Фоновое изображение будет начинаться справа по центру.
• центр вверху : Фоновое изображение будет начинаться в центре вверху.
• по центру снизу : Фоновое изображение будет начинаться по центру снизу.

• центр центр : Фоновое изображение будет начинаться в центре центра.
• x% y% : Значение x соответствует горизонтальному положению, а значение y соответствует вертикальному положению. Верхний левый угол равен 0% 0% , а нижний правый угол равен 9.0014 100% 100% .
• xpos ypos : Значение xpos — это горизонтальное положение, а значение ypos — вертикальное положение. Верхний левый угол — это значение 0 0 .
• начальный : для свойства будет установлено значение по умолчанию.
• наследовать : свойство будет унаследовано от родительского элемента.

Продолжайте изучать CSS бесплатно.

Начните бесплатное знакомство с CSS, HTML и JavaScript с помощью нашей 1-недельной образовательной неограниченной пробной версии. Текстовые схемы обучения Educative легко просматриваются и включают живую среду кодирования, что делает обучение быстрым и эффективным.

Станьте разработчиком переднего плана

Повтор фона

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

• повтор : Фоновое изображение повторяется по вертикали и горизонтали. Он обрежет финальное изображение, если оно не подходит.
• Repeat-x : Фоновое изображение повторяется по горизонтали.
• Repeat-y : Фоновое изображение повторяется по вертикали.
• без повтора : Фоновое изображение не будет повторяться (оно будет показано только один раз).

• пробел : фоновое изображение будет повторяться настолько, насколько это возможно без обрезки. Первое и последнее изображения размещаются в начале и в конце элемента, а пробелы равномерно распределяются между повторяющимися изображениями.
• round : Фоновое изображение будет повторяться и манипулироваться, чтобы полностью заполнить пространство (без пробелов между ними).
• начальный : для свойства будет установлено значение по умолчанию.
• наследовать : свойство будет унаследовано от родительского элемента.

Фоновое вложение

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

• исправлено : Фоновое изображение не прокручивается вместе со страницей.

• локальный : Фоновое изображение прокручивается вместе с содержимым элемента.

• прокрутка : Фоновое изображение прокручивается вместе со страницей.

• начальный : для свойства будет установлено значение по умолчанию.

• наследовать : свойство будет унаследовано от родительского элемента.

Давайте рассмотрим пример фиксированного значения :

Теперь давайте посмотрим на пример прокрутки значения. Это заставит изображение прокручиваться вместе со страницей.

Градиент фона

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

Линейные градиенты

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

Давайте посмотрим на базовый линейный градиент, который идет сверху вниз с двумя цветами:

Теперь давайте посмотрим на вертикальный линейный градиент, который имеет несколько цветов и создает радугу:

Радиальные градиенты

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

Давайте посмотрим на базовый радиальный градиент с тремя цветами:

Теперь давайте посмотрим на повторяющийся радиальный градиент:

Подведение итогов и следующие шаги

Поздравляем с первыми шагами в CSS! Есть много разных способов, которыми мы можем манипулировать нашими веб-страницами, используя различные свойства, которые мы исследовали сегодня. CSS — важная часть веб-разработки. Нам еще многое предстоит узнать о файлах CSS. Ниже приведены некоторые рекомендуемые темы для обсуждения:

• Flexbox
• Селекторы CSS
• Встроенные и блочные элементы
• HTML-шаблоны и HTML-элементы

Чтобы начать изучение этих и других концепций, ознакомьтесь со схемой обучения Educative Стать разработчиком переднего плана . На этом пути практического обучения вы освоите HTML, CSS и JavaScript, чтобы создавать красивые и функциональные веб-сайты и веб-приложения.