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

В этом разделе описываются все новые функции CSS3. Стандартные свойства для работы с фоном см. в Руководстве по свойству background в CSS.

Свойство background-size

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

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

Свойство background-size обычно используется для создания полноразмерных фоновых изображений, которые масштабируются в соответствии с размером области просмотра или с помощью браузера.

Свойство background-clip

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

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}

О том, как работает блочная модель см. Руководство по блочной модели в CSS.

Свойство background-origin

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

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

Свойство background-origin игнорируется, если значение свойства background-attachment указано как fixed.

Использование нескольких background-ов

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 может включать background-color.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.