Image div background html: HTML Background Images

Не делайте этого:

Что делать, если автор должен иметь CSS-изображение в div, который содержит контент

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

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

Сводка

• Старайтесь не использовать CSS для важных информационных изображений
• Для фоновых изображений, созданных с помощью CSS, рекомендуется предоставить альтернативный текст. При этом поместите изображение в собственное пустой с меткой aria-label и role="изображение Это также верно, в ситуации где CSS должен использоваться для информационного содержания.
• Если
  с изображением CSS абсолютно ДОЛЖЕН содержать другой контент, затем укажите пустой с aria-label и role="img" сразу после

  , который имеет изображение.

Не стесняйтесь комментировать в Твиттере @davidmacd

Информация об авторе:

Дэвид Макдональд — ветеран-член WCAG, соредактор книги «Использование WAI ARIA в HTML5 и член Целевой группы по доступности HTML5. Мнения мои собственные.

Все статьи блога

Установить фоновое изображение элемента Div с помощью функции в JavaScript

3 месяца назад

от Умар Хассан

В процессе создания привлекательных и адаптивных веб-сайтов необходимо добавлять изображения в объектную модель документа (DOM) при запуске функций. В конечном итоге это приводит к тому, что пользователь остается на сайте и исследует его, что приводит к увеличению трафика в пользу разработчика.

В этой статье объясняются подходы к установке фонового изображения блока div с помощью функции в JavaScript.

Как установить фоновое изображение элемента Div с помощью функции в JavaScript?

Фоновое изображение элемента div с помощью функции в JavaScript может быть установлено с использованием следующих подходов:

• Свойство « style.backgroundImage ».
• « setAttribute() » метод.

Подход 1. Установка фонового изображения элемента Div с помощью функции в JavaScript с использованием свойства style.backgroundImage

Свойство « backgroundImage » возвращает фоновое изображение элемента. Это свойство можно использовать для получения элемента « div » с помощью определяемой пользователем функции и применения к нему фонового изображения.

Синтаксис

object.style.backgroundImage = «url(‘URL’)|back|initial|inherit»

В данном синтаксисе:

• « url » относится к расположению файла изображения.
• « назад » указывает на фоновое изображение.
• « начальный » относится к значению свойства по умолчанию.
• « наследовать » указывает на наследование свойства от его родительского элемента.

Пример
Давайте следовать приведенному ниже примеру:

В приведенном выше фрагменте кода выполните следующие действия:

• Включите элемент « div » с указанным «
  id » и скорректированными размерами.
• После этого включить заявленный заголовок.
• Также создайте кнопку с прикрепленным событием « onclick », перенаправляющим на функцию divBackground().

Давайте перейдем к части кода JavaScript:

В приведенном выше фрагменте кода:

• Объявите функцию с именем « divBackground() ».
• В своем определении получить доступ к включенному элементу « div » по его « id », используя метод « document.getElementById() ».
• Наконец, примените свойство « style.backgroundImage » с указанным местоположением изображения как «
  URL ».
• Это приведет к установке фонового изображения для включенного заголовка и кнопки в « div ».

Вывод

В приведенном выше выводе видно, что фоновое изображение применяется к содержащемуся « заголовок » и « кнопка » в « div ».

Подход 2: установка фонового изображения элемента Div с помощью функции в JavaScript с использованием метода setAttribute()

Метод « setAttribute() » устанавливает новое значение атрибута. Этот метод можно применить для установки атрибута « background image » для таблицы, содержащейся в элементе « div ».

Синтаксис

element.setAttribute(имя, значение)

В приведенном выше синтаксисе:

• « имя » относится к имени атрибута.
• « значение » указывает на значение атрибута.

Пример
Давайте посмотрим на следующие строки кода:

В приведенном выше фрагменте кода:

• Включите элемент « div » с указанным « id ».
• Также содержит указанную « таблица » в « div » с указанными значениями « table-header » и « table-data ».
• На следующем шаге создайте кнопку с прикрепленным событием « onclick », вызывающим функцию backgroundImage().

Перейдем к JavaScript-части кода:

В приведенном выше фрагменте кода выполните следующие шаги:

• Объявите функцию с именем « backgroundImage() ».
• В своем определении получить доступ к элементу « div » по его « id », используя « document.getElementById()» 9Метод 0019».
• После этого примените метод « setAttribute() » с указанным путем к изображению, как обсуждалось, и атрибутом « style » в качестве параметра.

Вывод

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

Заключение

Свойство « style.backgroundImage » или метод « setAttribute() » можно использовать для установки фонового изображения элемента div с помощью функции в JavaScript. Первый подход может быть реализован для извлечения « div ” с помощью пользовательской функции и применить к нему фоновое изображение. Последний метод можно использовать для установки фонового изображения включенной таблицы путем установки ее атрибутов (изображения). В этом руководстве объясняется, как установить фоновое изображение для div с помощью функции, использующей JavaScript.

Об авторе

Умар Хассан

Я веб-разработчик. Будучи техническим автором, я стараюсь изучать новые вещи и адаптироваться к ним каждый день. Мне нравится писать о развивающихся программных инструментах и ​​технологиях и делать их понятными для конечного пользователя.