CSS3 Фон

CSS3 Фоны

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

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

  • background-image
  • background-size
  • background-origin
  • background-clip

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

Поддержка браузеров

Числа в таблице указывают номер первой версии браузера, поддерживающей это свойство.

Число, стоящее непосредственно перед -webkit-, -ms- или -moz-, — это номер первой версии браузера, поддерживающей свойство с префиксом.

Свойство
background-image
(с несколькими фоновыми изображениями)		 4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

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

В CSS3 фоновые изображения можно добавить с помощью свойства background-image.

Разные фоновые изображения разделяются запятыми, и среди всех изображений первое отображается на самом верхнем слое.

Пример

#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }

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

Для разных изображений можно задать разные свойства.

Пример

#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

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

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

background-size задаёт размер фоновых изображений. До CSS3 размер фонового изображения определялся фактическим размером изображения.

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

Указанный вами размер — это размер в процентах относительно ширины и высоты родительского элемента.

OperaSafariChromeFirefoxInternet Explorer

Пример 1

Сбросить фоновое изображение:

div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }

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

OperaSafariChromeFirefoxInternet Explorer

Пример 2

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

div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; }

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

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

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

Фоновые изображения можно размещать в областях content-box, padding-box и border-box.



OperaSafariChromeFirefoxInternet Explorer

Пример

Расположите фоновое изображение внутри content-box:

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

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

Множественные фоновые изображения в CSS3

CSS3 позволяет добавлять несколько фоновых изображений к элементу.
OperaSafariChromeFirefoxInternet Explorer

Пример

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

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

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

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

В CSS3 свойство background-clip указывает, что фон рисуется начиная с указанной позиции.

Пример

#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }

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

Новые свойства фона

Последовательность Описание CSS
background-clip Задает область рисования фона. 3
background-origin Задает область позиционирования фонового изображения. 3
background-size Задает размер фонового изображения. 3
Другие расширения