Вы также можете наложить одно или несколько фоновых изображений на отдельные части вашей страницы, вы также можете применить несколько фонов, настроить размер фоновых изображений и определить происхождение фона на основе уровней модели 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-переходы
- Фоновые изображения (Продвинутый урок CSS)
- Свойство CSS: background-image
- Свойство CSS: background-size
- Свойство CSS: background-origin
Примеры CSS:
