Главная->Уроки по css->Значения space и round для свойства background-repeat
Значения space и round для свойства background-repeat
В спецификации CSS3 широко известное свойство background-repeat имеет два новых значения (в дополнение к repeat, repeat-x, repeat-y, и no-repeat, которые хорошо известны в среде разработчиков): space и round. В данном уроке приводится описание использования данных значений и снимки экрана с соответствующими фонами, получившимися в результате. Значение repeat Сначала приведем код с использованием значения repeat: 1 .element { 2 width: 550px; 3 height: 400px; 4 background-image: url(bg.png); 5 background-position: 0 0; 6 background-repeat: repeat; 7 } Или в короткой записи: 1 .element { 2 background: transparent url(bg.png) repeat 0 0; 3 } (Значения transparent и 0 0 приводятся только для примера для свойств background-color и background-position, и не являются обязательными.) Результат выполнения кода в браузере будет выглядеть следующим образом: Использование значения repeat Значение space Теперь воспользуемся короткой записью для использования значения space: 1 .element { 2 background: transparent url(bg.png) space 0 0; 3 } В поддерживающих CSS3 браузерах выполнение кода будет выглядеть следующим образом: Использование значения space Разница с предыдущим примером заключается в том, что фоновое изображение не обрезается по границе элемента ни по вертикали, ни по горизонтали. Использование значения space приводит к тому, что изображение заполняет с промежутками все пространство элемента по ширине и высоте в целом виде, без обрезки. Значение round Теперь рассмотрим значение round: 1 .element { 2 background: transparent url(bg.png) round 0 0; 3 } В поддерживающих браузерах получим следующий результат: Использование значения round Обратите внимание, что фоновое изображение немного изменилось в пропорциях, и между повторами отсутствуют пробелы. Значение round приводит к масштабированию фонового изображения по ширине и высоте так, чтобы оно заполняло все пространство элемента целыми частями без обрезки. Поддержка в браузерах? Ужасная Данные новые значения пока имеют отвратительную поддержку в браузерах. Они поддерживаются только в Opera и IE9+. Да, шутка обстоятельств: IE имеет поддержку свойства CSS3, а Firefox 5 и Chrome 13.x (и разрабатываемый 15.x) - нет. Определение поддержки с помощью Modernizr Теоретически, можно использовать Modernizr и построить код следующим образом: 1 .element { 2 width: 550px; 3 height: 400px; 4 background: transparent url(bg.png) repeat 0 0; /* для всех браузеров */ 5 } 6 7 .bgrepeatspace .element { 8 background-repeat: space; /* для поддерживающих браузеров */ 9 } Первый блок кода используется для всех браузеров, а затем, после того, как Modernizr добавит соответствующий класс к элементу <html>, значение свойства будет изменено только для свойства background-repeat. Modernizr добавляет классы bgrepeatspace и bgrepeatround к элементу <html>, так что мы можем построить код с использованием новых свойств с надеждой на дальнейшее расширение поддержки.
