background-image

    0
    2268

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

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

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

    Когда установлено свойство background-image, в CSS также необходимо определить background color. Оно будет использоваться, background-image недоступно. Если же background-image доступно, то оно будет перекрывать background color. Все бордеры, определенные для элемента, отрисовываются поверх фона. Таким образом мы имеем: background-color на самом низу, изображения на уровень выше и бордеры на самом верху.

    То, как отрисовывается изображение относительно блока и его бордера определяется с помощью свойств background-clip и background-origin

    Каждое изображение создает «слой» внутри элемента. Даже если значение none, слой все равно создан, просто на нем ничего не отрисовывается.

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

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

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

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

    Тем не менее, некоторые разработчики иногда используют это свойство в сочетании со свойством text-indent в технике замещения изображений (в основном заголовки) и для того, чтобы показать графическое представление данного текста на его месте. Одна из техник, которая служит хорошим примером для семантического и доступного способа замены изображений, продемонстрирована Скоттом Кельюмом и вы можете подробнее почитать о ней в статье Replacing the -9999px hack (new image replacement).

    Синтаксис:

    Начальное значение: none

    Относится к: всем элементам

    Возможность анимирования: нет

    Значения

    <image> — устанавливает задний фон. Могут быть определены несколько изображений, перечисленыых через запятую.

    None – фоновое изображение не принимается. Если фоновое изображение было применено ранее, оно будет удалено.

    Примеры.

    Некоторые примеры, которые задают фоновое изображение

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

    Живой пример

    Данный пример показывает использование свойства:

    Поддержка браузерами:

    Свойство поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, IE, Android и iOS.

    Поддержка использования SVG как задний фон в CSS:

    Поддержка наложения фонов:

    Обратите внимание, что браузеры, которые не поддерживают наложение фонов, могут полностью игнорировать декларацию и вовсе ничего не отображать. Для поддержки более ранних браузеров (например IE8), вы можете использовать Modernizr library которая позволит вам отступить от правил, пример ниже:

    Modernizr добавляет класс к html элементу, который позволяет определить вид правила.

    ПОДЕЛИТЬСЯ
    Предыдущая статьяbackground-color
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя