УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Фоновые Свойства

« Назад Далее »

CSS3 Фон

CSS3 имеет несколько новых фоновых свойств,
которые позволяют лучше контролировать фон элемента.

В этом уроке вы узнаете о следующих свойствах фона:

  • background-size
  • background-origin

Также вы узнаете, как использовать несколько
фоновых изображений.

Поддержка Браузерами

Свойство Поддержка Браузерами
background-size
background-origin

Firefox 3.6 и более ранние версии не поддерживает свойство background-origin и требует приставки -moz- для поддержки свойства background-size.

Safari 4 требует приставки -webkit- для поддержки новых фоновых свойств.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 и Opera поддерживают новые свойства фона.

CSS3 Свойство background-size

Свойство background-size указывает размер фонового изображения.

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

Вы можете указать размер в пикселах или в процентах. Если вы указываете размер в процентах, размер будет относительным к ширине и высоте родительского элемента.

Opera Safari Chrome Firefox Internet Explorer

Пример 1

Изменить размер фонового изображения:

div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

Попробуйте сами »

Opera Safari Chrome Firefox Internet Explorer

Пример 2

Растянуть фоновое изображение, чтобы оно полностью заполнило область контента:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

Попробуйте сами »

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

Свойство background-origin указывает область расположения фоновых изображений.

Фоновое изображение может располагаться внутри блока контента, блока отступов или блока границы. 



Opera Safari Chrome Firefox Internet Explorer

Пример

Расположить фоновое изображение внутри блока контента:

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

Попробуйте сами »

CSS3 Несолько Фоновых Изображений

CSS3 позволяет вам использовать несколько фоновых изображений для элемента.
Opera Safari Chrome Firefox Internet Explorer

Пример

Установить два фоновых изображений для элемента body:

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

Попробуйте сами »

Новые Свойства Фона

Свойство Описание CSS
background-clip Указывает область рисования фоновых изображений 3
background-origin Указывает область расположения фоновых изображений 3
background-size Указывает размер фоновых изображений 3





« Назад Далее »



© 2011 - 2022 Уроки CSS