background-image
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Краткое описание
Свойство 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
-
Это ключевое слово обозначает отсутствие изображений.
-
обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов.
Официальный синтаксис
Примеры
Несколько фонов и прозрачность
Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.
HTML содержимое
This paragraph is full of cats
and stars.
This paragraph is not.
Here are more cats for you.
Look at them!
And no more.
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("star-transparent.gif"), url("cat-front.png");
background-color: transparent;
}
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-image |
Совместимость с браузерами
Смотрите также
- CSS спрайты изображений
- Статьи, связанные с изображениями::
,linear-gradient
,radial-gradient
,repeating-linear-gradient
,repeating-radial-gradient
,element()
.