Вы здесь: Главная > CSS > Свойство CSS: background

Свойство CSS: background

Опубликовано автором Просмотры: 22

Цвет фона и характеристики изображения.

Сокращённое свойство, объединяющее:

Возможные значения

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

Список вложенных значений соответствует определённому формату:

[изображение] [позиция] / [размер] [повтор] [вложение] [происхождение] [клип] [цвет]

[image][position][size][repeat][attachment][origin][clip][color]

Полный пример:

url("bg.jpg") 20% 0% / contain repeat-y fixed content-box padding-box #fff

Не все значения обязательны:

Если включена только одна из частей background-clip или background-origin, это значение будет применяться как к характеристикам clip, так и к характеристикам origin.

Любые другие исключённые значения по умолчанию будут иметь исходное значение.

“/” используется только для разделения частей положения и размера. Если параметр background-size исключен, “/” не требуется.

Базовый пример:

url("bg.jpg") 20% 0% repeat-y fixed #fff

Минимальный пример:

url("bg.jpg") #fff

inherit,initial или unset также может использоваться самостоятельно.

фон background: url("bg.png") top right no-repeat #ccc

background: url(«bg.png») top right no-repeat #ccc

background: url("bg.png") top right no-repeat #ccc

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

Можно применить несколько фонов, разделяя каждый список значений фона запятой. Первый фон будет применён сверху, “ближайший” к пользователю.

Последующие изображения будут применены под фоном, который находится перед ним.

Часть цвета фона должна применяться только к конечному указанному фону.

Пример:

url("upperImage.png") 0 0 no-repeat, url("lowerImage.png") right repeat-y #fff;
повторяющийся фон на css

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

Пример

.shorthand1 { url("bg.jpg") 20% 0% / 99px 33px repeat-y fixed content-box padding-box #fff; }
/* ...is the equivalent of... */
.longhand1 {
    background-image: url("bg.jpg");
    background-position: 20% 0%;
    background-size: 99px 33px;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-origin: content-box;
    background-clip: padding-box;
    background-color: #fff;
}
.shorthand2 { background: fuchsia; }
/* ...is the equivalent of... */
.longhand2 {
    background-color: fuchsia;
    background-image: initial; /* (none) */
    background-position: initial; /* (0% 0%) */
    background-size: initial; /* (auto) */
    background-repeat: initial; /* (repeat) */
    background-attachment: initial; /* (scroll) */
    background-origin: initial; /* (padding-box) */
    background-clip: initial; /* (border-box) */
}

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

Все свойства CSS

all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index

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