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;
Значения
Это ключевое слово обозначает отсутствие изображений.
(en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US) .
Официальный синтаксис
background-image =
# (en-US)
=
| (en-US)
none
=
| (en-US)
(en-US)
=
| (en-US)
=
url( (en-US) * (en-US) ) | (en-US)
=
src( (en-US) * (en-US) )
Примеры
Несколько фонов и прозрачность
Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.
HTML содержимое
div> p class="catsandstars">This paragraph is full of catsbr />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 спрайты изображений (en-US)
- Статьи, связанные с изображениями:: (en-US), linear-gradient() (en-US), radial-gradient() (en-US), repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US), element() (en-US).
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Свойство background-position
Свойство background-position задает местоположение фоновой картинки элемента. Местоположение можно задавать с помощью любых единиц для размеров. Первое значение обозначает отступ слева, второе — отступ сверху.
Можно также задавать положение ключевыми словами. В этом случае порядок значений не важен. Ключевые слова для вертикали: top , center , bottom . Ключевые слова по горизонтали: left , center , right .
Как пользоваться ключевыми словами
Чтобы разместить картинку ключевым словом, нужно указать одно значение для вертикали и одно для горизонтали. К примеру, если указать значение top right , то картинка станет сверху справа.
Порядок слов неважен: можно написать top right , а можно — right top . Если есть ключевое слово center — его можно опускать. Например, top center , все равно что просто top . А center center все равно что просто center .
Синтаксис
Пример
По умолчанию фоновая картинка будет в верхнем левом углу: