background-image

Краткое описание

Свойство CSS background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip и background-origin.

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

Примечание: Обратите внимание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут background-color. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.

Начальное значениеnone
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениякак указано, но с абсолютными значениями url
Animation typediscrete

Синтаксис

background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;

Значения

none

Это ключевое слово обозначает отсутствие изображений.

<image>

<image> (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US).

Официальный синтаксис

background-image = 
  <bg-image># (en-US)  

<bg-image> = 
  <image>  | (en-US)
  none     

<image> = 
  <url>       | (en-US)
  <gradient> (en-US)  

<url> = 
  url( <string> (en-US) <url-modifier>* (en-US) )  | (en-US)
  src( <string> (en-US) <url-modifier>* (en-US) )

Примеры

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

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("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

Совместимость браузеров

BCD tables only load in the browser

Смотрите также