CSS-фоны: кратные, размер и происхождение

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

Несколько фонов

Повторяющееся фоновое изображение, фоновое изображение в одном экземпляре и объединение их в одном поле

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

background-image: url(this.jpg), url(that.gif), url(theother.png);

Что более удобно, вы также можете определить все другие восхитительные аспекты фона. Например, если вы хотите оформить короткую ссылку в виде кнопки с отдельным фоном, маркером и стрелкой, вы могли бы использовать что-то вроде:

background: url(bg.png), url(bullet.png) 0 50% no-repeat, url(arrow.png) right no-repeat;

Легко, не так ли? Это то же самое, что использовать background-image, background-position, background-repeat background-attachment, backgroundи, , за исключением того, что вы можете указать более одного фона с помощью этой полезной маленькой запятой.

Размер фона

Свойство background-size позволяет растягивать или сжимать фоновое изображение.

background-size: contain и background-size: cover

Значения могут быть:

auto, который сохраняет исходный размер фонового изображения и соотношение ширины и высоты.

длина, ширина и высота, например 100px 50px (ширина 100 пикселей, высота 50 пикселей). Указание единственной длины, такой как 100px приведет к эквиваленту 100px auto.

проценты, ширина и высота, например 50% 25% (50% от ширины фоновой области, 25% от высоты фоновой области). Указание одного процента, такого как 50%, приведет к эквиваленту 50% auto.

комбинация длин, процентов и auto, например 80px auto (ширина 80 пикселей, автоматическая высота для сохранения исходного соотношения изображения)

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

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

Происхождение фона

Свойство background-origin удивительно скучный ребёнок из всей компании. Не безрассудный, просто скучный. Ребёнок, на которого другие дети показывают пальцем и смеются. Свойство определяет, где фактически начинается фоновая область поля. Если вы думаете о модели box, то при установке фона он по умолчанию должен начинаться с верхнего левого угла поля padding. Поэтому, если у вас была…

#burrito {
    width: 400px;
    height: 200px;
    border: 10px solid rgba(0,255,0,.5);
    padding: 20px;
    background: url(chilli.png) 0 0 no-repeat;
}

… фоновое изображение должно появиться в верхнем левом углу, в поле заполнения, сразу после внутренних краёв зелёной рамки. Однако вы можете изменить это поведение с помощью background-origin. Его самоописывающими значениями могут быть padding-box (по умолчанию, как описано выше), border-box и content-box.

Таким образом, добавление background-origin: border-box к предыдущему примеру приведёт к тому, что происхождение фонового изображения будет скрыто внутри границы.

Страницы в тему:

Примеры CSS:

Добавить комментарий