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.

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

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

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

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