CSS3 значения space и round для свойства background-repeat


Содержание

СSS3 Backgrounds

В СSS3 появилось несколько новых свойств background , которые позволяют лучше контролировать цвет фона HTML :

  • background-size ;
  • background-origin ;
  • background-clip .

Поддержка браузеров

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

Свойство Google chrome IE Mozilla Safari Opera
background-image 4.0 9.0 3.6 3.1 11.5
background-size 4.0

1.0 -webkit- 9.0 4.0

3.6 -moz- 4.1

3.0 -webkit- 10.5

10.0 -o- background-origin 1.0 9.0 4.0 3.0 10.5 background-clip 4.0 9.0 4.0 3.0 10.5

CSS3 множественные фоны

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

В следующем примере первое — изображение цветка ( выравнивается по нижнему правому краю ), а второе — представляет собой фон ( выравнивается по верхнему левому углу ):

Можно задать несколько фоновых изображений с помощью отдельных свойств фона ( как показано выше ) или сокращённого свойства background .

В следующем примере используется сокращённое свойство background ( результат такой же, как в примере выше ):

CSS3 размер фона

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

Размер может быть указан в единицах длины, процентах или с помощью одного из двух значений: contain или cover .

Следующий пример уменьшает фоновое изображение по сравнению с исходным изображением ( с использованием пикселей ):

Значение contain задает изображению максимально возможные размеры ( но по ширине и высоте оно должно помещается в границы фона ). Таким образом, в зависимости от пропорций изображения и области блока, могут быть участки фона, которые не закрываются фоновым изображением.

Значение cover задает изображению или HTML цвет фону страницы минимально возможные размеры, при которых оно закроет всю фоновую область блока ( ширина и высота равны или превышают область содержимого ). Таким образом, некоторые части изображения могут быть не видны за пределами блока.

Следующий пример иллюстрирует использование contain и cover :

Определение размеров множественных фоновых изображений

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

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

Полный размер фонового изображения


Как задать цвет фона в HTML или изображение, которое охватывает все окно браузера.

Требования заключаются в следующем:

  • Заполнить всю страницу изображением ( без пробелов );
  • Масштабировать изображение по мере необходимости;
  • Центрировать изображение на странице;
  • Не вызывать скроллбары.

В следующем примере показано, как это сделать. Используйте HTML-элемент ( всегда подстраивается под высоту окна браузера ). Затем установите в нем фиксированный и центрированный фон, и его размер с помощью свойства background-size :

CSS3 свойство background-origin

В CSS3 свойство background-origin определяет расположение и размеры области отображения фонового изображения или HTML цвета фона страницы.

Свойство принимает три различных значения:

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

Следующий пример иллюстрирует свойство background-origin :

CSS3 background-clip

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

Оно принимает три различных значения:

  • border-box — ( по умолчанию ) фоновое изображение не обрезается.
  • padding-box — обрежет фон по внутреннему краю области рамки.
  • content-box — обрежет фон по краю области содержимого.

Следующий пример иллюстрирует свойство background-clip :

CSS3 свойства фона

Свойство Описание
background Сокращенное свойство для установки всех фоновых свойств в одном объявлении.
background-clip Управляет обрезкой фона.
background-image Определяет одно или несколько фоновых изображений для элемента.
background-origin Определяет расположение фонового изображения (изображений)
background-size Определяет размер фонового изображения (изображений)

Данная публикация представляет собой перевод статьи « CSS3 Backgrounds » , подготовленной дружной командой проекта Интернет-технологии.ру

Управление фоном элемента. Свойства группы background

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

Свойство background-color

Каждый элемент на странице может иметь фоновый цвет. Чаще его назначают для блочных элементов, но также он применим и к блочно-строчным, например, к ссылкам со значением свойства display: inline-block , и реже — к строчным элементам, которые нужно выделить на странице цветом:

Для указания цвета может быть использовано 16-ричное значение в виде 3-х или 6 цифр, rgb(), rgba(), hsl(), hsla() или название цвета. В коде приведены разнообразные варианты записи красного цвета, в том числе и с полупрозрачностью:

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


Также используется значение transparent (для прозрачного фона). Кстати именно transparent является значением по умолчанию для всех элементов.

Свойство background-image

Для вставки фонового изображения используйте правило background-image :

Для того чтобы убрать изображение необходимо использовать значение none:

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

Для фоновых изображений используют обычно файлы в формате JPG, PNG, SVG или GIF. Еще одним редко используемым форматом является APNG, т.е. Animated (анимированный) PNG, просто потому, что изображений в таком формате еще очень мало и они поддерживаются далеко не всеми браузерами (инфо на caniuse.com). Также в сети все больше появляется файлов в формате WEBP, предложенном Google в 2010 году и имеющем пока частичную поддержку браузерами (caniuse.com). Этот формат можно получить с помощью конвертера.

Посмотрите на примере на фоновые изображения в разных форматах:

Свойство background-repeat

Чтобы управлять «распространением» (или клонированием) изображения, можно использовать свойство background-repeat . Оно может замостить изображением-текстурой всю облаcть элемента-контейнера (значение repeat ), повторяться только по горизонтали ( repeat-x ) или по вертикали ( repeat-y ), а также задавать одну не повторяющуюся фоновую картинку (значение no-repeat ). Также в CSS3.0 появились новые значения round и space :

  • round замащивает элемент изображениями целое количество раз, но если необходимо, может отмасштабировать их.
  • space также создает целое количество плиток, но при этом будет добавлять промежутки пустого пространства между изображениями текстуры.

В примере ниже вы можете посмотреть все варианты этого свойства на примере бесшовной и обычной текстуры. Бесшовная текстура — это обычно не очень большое по размеру изображение, которое укладываясь плитками по горизонтали и вертикали (значение repeat ), не дает заметных стыков.

Свойство background-position

Также вы можете указать браузеру место, в котором будет расположено изображение. Для этого есть свойство background-position со значениями в виде ключевых слов (left, center, right — по горизонтали, или координате по X, top, center, bottom — для вертикали, или координате по Y), в виде единиц измерения, обычно используемых в css (px, em, ex, pt), или в процентах (%). Но, если вы задаете свойство в %, то должны понимать, что проценты берутся от ширины или высоты того элемента, для которого указывается это свойство. Кроме того, значения в виде ключевых слов и в виде процентов имеют следующую аналогию:

СSS Свойство background-image

Пример

Повторять фоновое изображение только по вертикали:

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

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

По индексу, элемент background-image повторяется как по вертикали, так и по горизонтали.

Совет: Фоновое изображение размещается в соответствии с свойством background-position. Если не задано значение background-position, изображение всегда размещается в верхнем левом углу элемента.

Значение по умолчанию: repeat
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS1
JavaScript синтаксис: object.style.backgroundRepeat=»repeat-x» Редактор кода

Поддержка браузеров

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

Свойство
background-repeat 1.0 4.0 1.0 1.0 3.5

Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.


CSS синтаксис

Значение свойств

Значение Описание Воспроизвести
repeat Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не подходит. Это показатель Воспроизвести »
repeat-x Фоновое изображение повторяется только по горизонтали Воспроизвести »
repeat-y Фоновое изображение повторяется только по вертикали Воспроизвести »
no-repeat Фоновое изображение не повторяется. Изображение будет показано только один раз Воспроизвести »
space Фоновое изображение повторяется как можно чаще без отсечения. Первое и последнее изображения закрепляются по обе стороны от элемента, а пробелы равномерно распределяются между изображениями Воспроизвести »
round Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (нет пробела) Воспроизвести »
initial Задает этому свойству значение индекса. Прочитать о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Повторите фоновое изображение как по вертикали, так и по горизонтали (это индекс):

Пример

Повторять фоновое изображение только по горизонтали:

Пример

Не повторяйте фоновое изображение. Изображение будет показано только один раз:

Пример

Использование background-repeat: space и background-repeat: round:

background-repeat

На этой странице

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Синтаксис

Значения

Следующие однозначные имеют двухзначные эквиваленты:

repeat-x тоже самое, что и repeat no-repeat
repeat-y тоже самое, что и no-repeat repeat
repeat тоже самое, что и repeat repeat
space тоже самое, что и space space
round тоже самое, что и round round
no-repeat тоже самое, что и no-repeat no-repeat

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

repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством background-position .

Примеры

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat .

Свойство background-repeat

По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat . У свойства 4 значения:

  • repeat — повторять во всех направлениях. Это значение по умолчанию.
  • repeat-x — повторять только по горизонтали.
  • repeat-y — повторять только по вертикали.
  • no-repeat — не повторять.


Хотите получите практический опыт веб-разработки и подробные рекомендации по тому, над чем стоит работать, чтобы стать востребованным фронтенд-разработчиком?

background-repeat

Easily manage projects with monday.com

If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here’s an example:

These are the possible values for this property (besides the usual stuff like inherit ):

  • repeat : tile the image in both directions. This is the default value.
  • repeat-x : tile the image horizontally
  • repeat-y : tile the image vertically
  • no-repeat : don’t tile, just show the image once
  • space : tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.
  • round : tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it’s less than half one image width left, stretch, if it’s more, stretch.

There is also the two value syntax:

Which makes the single-value syntaxes just shorthand for the two-value syntax. For example, round is really round round .

You can also comma-separate multiple values if you’re dealing with multiple backgrounds.

Interactive demo on how space and round work, as compared to repeat :

Here’s another fun demo with hamburgers demonstrating background-repeat: round; .

Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

The comma-separated multiple value synta only supported in Firefox 3.6+ and IE 9+. The two-value syntax for controlling horizontal and vertical values separated only supported in Firefox 13+ and IE 9+. The round and space keywords are only Firefox 49+ and IE 9+.

background-repeat

Easily manage projects with monday.com

If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here’s an example:

These are the possible values for this property (besides the usual stuff like inherit ):

  • repeat : tile the image in both directions. This is the default value.
  • repeat-x : tile the image horizontally
  • repeat-y : tile the image vertically
  • no-repeat : don’t tile, just show the image once
  • space : tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.
  • round : tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it’s less than half one image width left, stretch, if it’s more, stretch.

There is also the two value syntax:

Which makes the single-value syntaxes just shorthand for the two-value syntax. For example, round is really round round .


You can also comma-separate multiple values if you’re dealing with multiple backgrounds.

Interactive demo on how space and round work, as compared to repeat :

Here’s another fun demo with hamburgers demonstrating background-repeat: round; .

Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

The comma-separated multiple value synta only supported in Firefox 3.6+ and IE 9+. The two-value syntax for controlling horizontal and vertical values separated only supported in Firefox 13+ and IE 9+. The round and space keywords are only Firefox 49+ and IE 9+.

Background-repeat: repeat; vs. background-repeat: space; против background-repeat: round ;?

Я читаю CSS3 Background & Border Module, а для свойства background-repeat я вижу два новых значения — space и round .

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

Может ли кто-нибудь сделать хорошую дифференциацию между ними, желательно дать некоторые графические реплики?

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

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

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

Использование фонов при оформлении сайта. Часть 1

Совсем недавно мы с Вами познакомились со свойствами границ (border) при использовании CSS. Сегодня мы займемся рассмотрением свойств фонов.

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

Свойство background

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

Это свойство background определяет фон для всех элементов с идентификатором класса .box (подробнее об идентификаторах читаем здесь) и придает ему следующие свойства: белый цвет подложки (#ffffff), фоновое изображение, которое находится по адресу url (images/bg.png) и задает для этого фона повторение по оси х. Если писать каждую инструкцию отдельно, то код будет выглядеть вот так:

Эти две записи абсолютно идентичны.

А теперь давайте более конкретно разберем все специфичные свойства фонов.

Свойство background-color

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

Также может принимать значение transparent (прозрачный фон). Кстати, по умолчанию фон каждого элемента имеет значение transparent. Поэтому, если вы не определите цвет фона каждого элемента, то цвет фона дочерних элементов совпадает с цветом фона родительского элемента.


Пример использования цвета фона:

Для этого контейнера задано свойство фона:

Свойство background-image

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

Пример применения свойства:

Эта инструкция определяет фоновую картинку, которая находится по адресу url (images/bg.jpg) для всех элементов с идентификатором класса .box

Также может иметь значение none. Оно отменяет применение фоновой картинки к элементу.

Продолжим развивать наш пример из прошлого пункта (добавим к нему фоновую картинку):

Мы добавили к коду свойство background-image. И теперь он выглядит так:

Как видите, картинка добавилась, но поскольку ее размер меньше нашего контейнера — она растиражировалась. Чтобы этого не происходило — используем следующее свойство.

Свойство background-repeat

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

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

Свойство background-repeat может принимать следующие значения:

no-repeat — Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.

repeat — Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.

repeat-x — Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.

repeat-y — Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.

inherit — Наследует значение родителя.

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

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

Продолжим работать с нашим примером (уберем тиражирование):

Мы добавили к нашему коду свойство background-repeat и теперь фоновая картинка не тиражируется.

Теперь неплохо было бы выровнять картинку по центру.

Свойство background-position

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


В CSS3 допустимо указывать несколько значений — для каждого фона (если фонов несколько), перечисляя значения через запятую.

У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах и прочих единицах измерения CSS. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной или иной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • right top = top right = 100% 0% (в правом верхнем углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

Вернемся к нашему примеру (выровняем фоновую картинку по центру):

Код теперь выглядит вот так:

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

Давайте теперь на наш пример наложим еще один слой фона. На нем нанесем несложный узор на наш контейнер.

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

Для этого мы немного изменили код. Теперь он выглядит вот так:

Хочу отметить, что размер картинки узора всего 6×6 пикселей. Поэтому мы ее растиражировали по горизонтали и вертикали. Для этого мы также (через запятую в свойстве background-repeat) прописали значение для второго фона. Значения для каждого фона нужно располагать в том же порядке, что и в свойстве background-image.

Заключение.

Это основные (наиболее часто используемые) CSS свойства для фонов. также к основным можно отнести свойство background-size. Его применение я подробно описал в статье: «Управление размером фонового изображения при помощи CSS».

Кроме них есть еще несколько дополнительных свойств. Мы рассмотрим их завтра. Не пропустите. Подписывайтесь на обновления.

P.S.: Если к нашему примеру добавить еще несколько свойств границ, то мы получим вот такой код.

. И вот такую симпатичную кнопку.

Подробное описание CSS свойств границ можно найти здесь.

CSS свойство background-repeat

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

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

Фоновое изображение размещается в соответствии с установками свойства background-position. Если свойство background-position не установлено, то изображение располагается в верхнем левом углу элемента.

CSS синтаксис

Возможные значения

Значение Описание
repeat Значение по умолчанию. Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x Фоновое изображение повторяется только по горизонтали.
repeat-y Фоновое изображение повторяется только по вертикали.
no-repeat Фоновое изображение показывается в одном экземпляре и не повторяется.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Зададим, чтобы фоновое изображение повторялось только по вертикали

Цукерберг рекомендует:  Работа - Ищем web-разработчика
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих