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