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

В спецификации 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

CSS3: значения space и round для свойства background-repeat | | 2012-06-19 12:04:07 | | Статьи Web-мастеру | | В спецификации CSS3 широко известное свойство background-repeat имеет два новых значения (в дополнение к repeat, repeat-x, repeat-y, и no-repeat, которые хорошо известны в среде разработчиков): space | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: