background-image
Краткое описание
Свойство CSS background-image
устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.
Границы border
элемента затем рисуются поверх них, и background-color
рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip
и background-origin
.
Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none
.
Примечание:
Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут background-color
. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
Начальное значение | none |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Обработка значения | как указано, но с абсолютными значениями url |
Animation type | discrete |
Синтаксис
background-image: none;
background-image: url(http://www.example.com/bck.png);
background-image: inherit;
Значения
none
-
Это ключевое слово обозначает отсутствие изображений.
<image>
-
<image>
обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов.
Официальный синтаксис
background-image =
<bg-image>#
<bg-image> =
<image> |
none
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Примеры
Несколько фонов и прозрачность
Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.
HTML содержимое
<div>
<p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
<p>This paragraph is not.</p>
<p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
<p>And no more.</p>
</div>
CSS содержимое
pre,
p {
font-size: 1.5em;
color: #fe7f88;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
p {
background-image: none;
}
.catsandstars {
background-image: url("startransparent.gif"), url("catfront.png");
background-color: transparent;
}
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-image |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- CSS спрайты изображений
<img>
- Статьи, связанные с изображениями::
<image>
,linear-gradient
,radial-gradient
,repeating-linear-gradient
,repeating-radial-gradient
,element()
.