Background-repeat и его значения round и space

Reading time ~5 minutes

Помимо хорошо известных четырех значений свойства

1
background-repeat
-
1
repeat
,
1
no-repeat
,
1
repeat-x
,
1
repeat-y
, в спецификации CSS3 появились еще два, с которыми я познакомился совсем недавно.

Перечислим их:

  • 1
    background-repeat: round
    
  • 1
    background-repeat: space
    

Отлично, скажете вы! Ну и что, что же это за свойства? Мало прежних четырех? Давайте разберемся сначала, что это за свойства, а уже потом будем говорить, нужны они или не нужны.

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

Для начала посмотрим, как работает простое и привычное нам значение

1
repeat
:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: repeat;
}

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

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

Свойство background-repeat: round

В спецификации CSS3 появилось одно из двух значений свойства

1
background-repeat
, которое делает попытку исправить ситуацию и выполнять “заливку” фона более красиво и “интеллектуально”. Это значение называется
1
round
- от английского округлять.

Работает оно по следующему принципу - изображение размножается по вертикали и горизонтали фона блока, как и прежде. Но при этом браузер определяет, сколько раз удалось поместить изображение в блок без обрезки (по вертикали и по горизонтали). Сколько “целых” раз удалось поместить - столько раз он и помещает. А с оставшимся пустым пространством он поступает так - растягивает изображение по вертикали и горизонтали, чтобы равномерно заполнить это пустое пространство.

Пример показан ниже:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: round;
}

Свойство background-repeat: round

Результат получился не слишком красивый, конечно. Но зачет - попытка сделана. А если быть более точным и без всякого “юмора”, то такой способ хорошо подойдет для фоновых изображений небольшого размера.

Свойство background-repeat: space

Еще одно значение свойства

1
background-repeat
из спецификации CSS3, призванное решить проблему красивого размещения фонового изображения в блоке элемента, это значение
1
space
.

Принцип работы этого свойства аналогичен значению

1
round
- браузер также считает количество целых “вхождений” изображения в фон элемента. Но вот с пустым пространством он поступает несколько иначе. Браузер равномерно распределяет его между изображениями (размер которых он оставляет неизменными).

Чтобы было понятно, о чем идет речь, посмотрите на пример ниже:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: space;
}

Свойство background-repeat: space

Мною намеренно были изменены размер блока, для которого “прописывалось” фоновое изображение; и размер самого изображения также. Все было сделано с целью более наглядного представления, как работает значение

1
space
для свойства
1
background-repeat
.

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

Значения Round & Space - поддержка браузерами

В заключение осталось упомянуть последнее - какими браузерами поддерживаются оба значения свойства

1
background-repeat
. Похвастаться особо нечем - только два браузера на момент написания этой статьи поддерживают
1
space
и
1
round
. Первый - это Google Chrome начиная с
1
v.32
. А вот второй браузер, который может похвастаться (держитесь крепче за стул!) - это Internet Explorer v10.

Поддержка с помощью Modernizr

В библиотеку Modernizr включена (благодаря ходатайству Louis Lazaris) поддержка значений

1
round
и
1
space
CSS-свойства
1
background-repeat
с помощью соответствующих классов
1
bgrepeatspace
и
1
bgrepeatround
. Поэтому, теперь можно использовать эту библиотеку для определения возможности поддержки в браузерах.

Например, таким кодом:

.element {
  width: 550px;
  height: 400px;
  background: transparent url(bg.jpg) repeat 0 0; /* for all browsers */
}

.bgrepeatspace .element {
  background-repeat: space; /* for supporting browsers */
}

Заключение

Вот, в принципе, и все по значениям

1
round
и
1
space
свойства
1
background-repeat
. В статье активно использовались мысли (и даже код, когда шла речь о Modernizr) из источника:

CSS3′s ‘space’ and ‘round’ Values for background-repeat

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017