Style background image: background-origin — CSS: Cascading Style Sheets

image — свойство css :: руководство cssdot.ru

Свойство background-image позволяет установить одно или несколько фоновых изображений для элемента, которые будут отображаться в границах области, охватываемой внешним краем рамок элемента, и заполненной фоновым цветом, если он задан с помощью свойства — (background-color).

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

Кроме того, по соображениям совместимости и обеспечения общедоступности информации для пользователей с ограниченными возможностями, не следую использовать фоновые изображения в качестве единственного метода представления важных данных, потому что изображения отсутствуют в

не графических средствах воспроизведения, и, к тому же, они могут быть отключены в высоко-контрастных режимах отображения. Более подробно с рекомендациями на данную тему можно ознакомится в спецификации Web Content Accessibility Guidelines (WCAG) 2.0.

В качестве изображения возможно использовать следующие значения:

[:inherit:]
значение свойства наследуется от родительского элемента
[:none:]
изображение отсутствует, отображается как пустой прозрачный слой
[:image:]
значение, типа «изображение», которое может быть задано как:
  • ссылка на графический файл — url(относительный или абсолютный путь к изображению)
  • встроенное изображение — url(data:[тип][;charset=[кодировка]][;base64],данные
    )
  • градиент — linear-gradient(), radial-gradient() и т.д.
  • функция image()
  • функция element()
  • функция image-rect()

    Практически все современные браузеры поддерживают значения — inherit, none, url(), а так же функции для градиентов, но с префиксами -moz, -webkit, -o. Функция image() хотя и описана в последней версии спецификации …, но на данный момент не поддерживается ни одним из браузеров. Функция element() определена в следующий версии спецификации CSS 4, и с префиксом реализована только в браузере Firefox. Функция image-rect() не содержится в спецификациях и поддерживается только браузером Firefox.

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

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

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

    • Спецификация стандарта CSS 2. 1
    • Спецификация стандарта CSS 3
    • Описание на Mozilla Developer Network
    • Описание на Microsoft Developer Network
    • Описание на Safari Developer Library

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

    Фоновое изображение

    Синтаксис:

    CSS2 <image> | none | inherit

    CSS3 [<image> | none [, <image> | none ]* | inherit

    По умолчанию:

    none

    Наследование:

    не наследуется

    Объектная модель документа (DOM):

    [элемент].style.background-image


    Кроссбраузерная совместимость

    Internet Explorer
    Firefox
    Chrome
    Safari
    Opera

    Стиль HTML DOM backgroundImage Свойство

    ❮ Назад ❮ Справочник по объектам стиля Далее ❯

    Пример

    Установить фоновое изображение для документа:

    document.body.style.backgroundImage = «url(‘img_tree.png’)»;

    Попробуйте сами »

    Другие примеры «Попробуйте сами» ниже.


    Определение и использование

    Свойство backgroundImage устанавливает или возвращает фоновое изображение элемента.

    Совет: В дополнение к фоновому изображению вы также должны указать фоновый цвет. Фоновый цвет будет использоваться, если изображение недоступно.

    См. также:

    Стили HTML: Свойство фона

    Учебник CSS: Фоны CSS

    Учебник CSS3: Фоны CSS3

    Справочник по CSS: Свойство background-image


    Синтаксис

    объект .style.backgroundImage

    Установите свойство backgroundImage:

    объект .style.backgroundImage = «url(‘ URL ‘)|none|initial|inherit»


    Значения свойств

    Значение Описание
    URL( ‘URL’ ) Расположение файла образа
    нет Нет фонового изображения. Это по умолчанию
    начальный Устанавливает для этого свойства значение по умолчанию. Читать про
    начальный
    унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

    Технические детали

    Значение по умолчанию: нет
    Возвращаемое значение: Строка, представляющая фоновое изображение
    Версия CSS CSS1


    Поддержка браузера

    backgroundImage — это функция CSS1 (1996).

    Полностью поддерживается во всех браузерах:

    Хром Край Фаерфокс Сафари Опера ИЭ
    Да Да Да Да Да Да

    Дополнительные примеры

    Пример

    Установка фонового изображения для определенного элемента

    :

    document. getElementById(«myDiv»).style.backgroundImage = «url(‘img_tree.png’)»;

    Попробуйте сами »

    Пример

    Вернуть фоновое изображение определенного элемента

    :

    let img = document.getElementById(«myDiv»).style.backgroundImage;

    Попробуйте сами »

    Пример

    Вернуть фоновое изображение документа:

    let img = document.body.style.backgroundImage;

    Попробуйте сами »

    ❮ Предыдущий ❮ Справочник по объектам стиля Следующий ❯


    ВЫБОР ЦВЕТА



    Лучшие учебники
    Учебное пособие по HTML
    Учебное пособие по CSS
    Учебное пособие по JavaScript
    Учебное пособие
    Учебное пособие по SQL
    Учебное пособие по Python
    Учебное пособие по W3.CSS
    Учебное пособие по Bootstrap
    Учебное пособие по PHP
    Учебное пособие по Java
    Учебное пособие по C++
    Учебное пособие по jQuery

    900 Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3. CSS
    Справочник по Bootstrap

    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery


    ФОРУМ | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

    Copyright 1999-2023 Refsnes Data. Все права защищены.
    W3Schools работает на основе W3.CSS.

    Оставить комментарий

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *