Фон (Background) в CSS3

С CSS3 можно применить несколько фонов к элементам.

Использование CSS3 фона

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

В следующем разделе мы познакомим вас со всеми новыми функциями фона CSS3, а также с другими свойствами, связанными с фоном, см. такжеCSS-фонУчебник.

Атрибут background-size CSS3

Атрибут background-size может быть использован для указания размера фонового изображения. До CSS3 размер фонового изображения определялся фактическим размером изображения. Размер фонового изображения можно указать в пикселях, процентах или с помощью ключевых слов auto, contain и cover. Негативные значения не допускаются.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　background:　url("images/sky.jpg")　no-repeat;
　　　　background-size:　contain;
　　　　border: 6px solid #333;
}

Атрибут background-clip CSS3

Атрибут background-clip может быть использован для указания того, распространяется ли фон элемента на рамку. Атрибут background-clip может принимать три значения: border-box, padding-box, content-box.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　пунктирная линия　#333;
　　　　background: orange;
　　　　background-clip: content-box;
}

См. такжеCSS-контейнерная модельУчебник, чтобы узнать больше о контейнере элемента.

Атрибут background-origin CSS3

Эта атрибут background-origin может быть использован для указания области позиционирования фонового изображения. Он может принимать те же значения, что и атрибут background-clip: border-box, padding-box, content-box.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　пунктирная линия　#333;
　　　　background:　url("images/sky.jpg")　no-repeat;
　　　　background-size:　contain;
　　　　background-origin:　content-box;
}

Множественные фоны в CSS3

CSS3 позволяет добавлять несколько фонов к одному элементу. Фоны накладываются друг на друга. Количество слоев определяетсяbackground-imageили backgroundКоличество запятых в значении краткого свойства определяет.

.box　{
　　　　width:　100%;
　　　　height:　500px;
　　　　background:　url("images/birds.png")　no-repeat　center,　　url("images/clouds.png")　　no-repeat　center,　lightblue;
}

первое значение списка запятых, разделенного списком фона (т.е.background-image“birds.png”）будет отображаться в верхней части, а последний значений (т.е. “lightblue” цвет) будет отображаться в нижней части. Только последний фон может содержатьbackground-color.