etxt banner 468x60etxt banner 728x90etxt banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

Руководство по свойству background в CSS3

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.

smsc banner 480x320smsc banner 728x90smsc banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее