Как изменить фоновое изображение в JavaScript
JavaScript8 месяцев назад
от Sharqa Hameed
В JavaScript есть веб-страницы, которым нужен привлекательный макет, например темный фон, который обычно лучше подходит для интерфейсов. Точно так же белый фон позволяет читателям сосредоточиться на содержании, поэтому новостные порталы или блоги используют сравнительно светлый фон с темным текстом. В таких случаях JavaScript становится очень удобным для форматирования и улучшения дизайна документов.
В этой статье будут обсуждаться методы изменения фонового изображения в JavaScript.
Как изменить фоновое изображение в JavaScript?
Чтобы изменить фоновое изображение в JavaScript, можно использовать следующие подходы:
- Свойство « backgroundImage » в « DOM ».
- Метод « getElementById() » и свойство « backgroundImage » в « параграф ».
Пройдитесь по обсуждаемым методам один за другим!
Метод 1: изменение фонового изображения в JavaScript с использованием свойства backgroundImage в модели DOM.
Свойство « backgroundImage » настраивает фоновое изображение указанного элемента. Этот метод можно применить, применив свойство backgroundImage и указав фоновое изображение, указав путь к нему в качестве аргумента.
Синтаксис
В приведенном выше синтаксисе « URL » относится к пути к изображению.
Посмотрите на следующий пример для демонстрации.
Пример
В этом примере будет добавлена кнопка с указанным значением и событие « onclick », перенаправляющее на функцию
с именем backgroundImage():
Теперь функция « фоновое изображение( ) », и свойство « document.body.style.backgroundImage » будет обращаться к фоновому изображению, используя указанный путь к изображению в своем аргументе:
Вывод вышеуказанной реализации приведет к следующему:
Метод 2: Изменение фонового изображения в JavaScript с использованием метода getElementbyId () и свойства фонового изображения в пункте
элемент с указанным значением и свойство « backgroundImage », как указано выше, возвращает фоновое изображение конкретного элемента, указанного в его аргументе.
Этот метод можно применять для отображения указанного цвета на фоне определенного абзаца.
Синтаксис
Здесь « elementID » относится к идентификатору элемента.
Просмотрите следующий пример, чтобы лучше понять изложенную концепцию.
Пример
Во-первых, включите абзац в тег
и назначьте ему определенный идентификатор:
Затем создайте кнопку с событием onclick для доступа к функции backgroundImage(), как обсуждалось в предыдущем методе. :
Наконец, аналогичным образом объявите функцию с именем « backgroundImage() ». Здесь получите доступ к определенному идентификатору с помощью метода « getElementById() » и примените к нему указанное фоновое изображение. Это приведет к реализации цвета на фоне абзаца:
Вывод
Мы собрали самый простой метод для изменения фонового изображения в Javascript
Заключение
Чтобы изменить фоновое изображение в Java сценарий, применить « backgroundImage » свойство на « DOM » для применения указанного фонового изображения на всей веб-странице с помощью функции или путем получения определенного идентификатора с помощью метода « getElementById() » и применения свойства « backgroundImage » на указано « параграф ».
Этот блог иллюстрирует методы изменения фоновых изображений в JavaScript.
Об авторе
Sharqa Hameed
Я энтузиаст Linux, я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук, и я увлечен обучением и преподаванием.
Посмотреть все сообщения
Как добавить фоновые изображения в различные разделы сайта?
Astra версии 1.3.0 и выше предоставляет возможность добавлять фоновые изображения в различные разделы сайта.
С помощью этой опции вы можете улучшить дизайн основной части, верхнего колонтитула, содержимого, боковой панели и нижнего колонтитула вашего веб-сайта. В дополнение к предыдущей опции цвета фона теперь вы также можете увидеть опцию фонового изображения.
Где найти опцию?На панели инструментов WordPress перейдите к Внешний вид > Настроить и в различных областях вы найдете настройки для загрузки фоновых изображений
Где я могу добавить фоновое изображение в тему Astra?
С темой Astra вы можете добавить фоновое изображение в следующие области:
Тело : Чтобы добавить фоновое изображение в тело веб-сайта, перейдите к Внешний вид> Настроить> Глобально> Цвета .
Прокрутите вниз до История сайта . У вас будет 3 различных варианта, таких как Цвет, Градиент и Изображение. Опция цвета позволяет выбрать статический цвет в качестве фона сайта. Параметр «Градиент» позволяет выбрать несколько цветов в качестве фона вашего сайта. Параметр «Изображение» позволяет выбрать любое изображение в качестве фона сайта.
Виджеты нижнего колонтитула : Чтобы выбрать фон для виджетов нижнего колонтитула, перейдите к Внешний вид>Настроить>Конструктор нижнего колонтитула . Нажмите на значок шестеренки , как показано на изображении ниже. Перейдите на вкладку Дизайн и прокрутите до параметра Фон . Вы можете выбрать один цвет, цвет градиента или изображение в качестве фона виджета нижнего колонтитула.
Панель нижнего колонтитула : Чтобы добавить фон в панель нижнего колонтитула, которая в основном расположена в нижней части виджетов нижнего колонтитула, перейдите в «Внешний вид»> «Настроить»> «Конструктор нижнего колонтитула».
Нажмите на значок шестеренки , как показано на рисунке ниже. Перейдите на вкладку Дизайн и прокрутите до параметра Фон . Вы можете выбрать один цвет, цвет градиента или изображение в качестве фона виджета нижнего колонтитула.
Фоновое изображение для модулей Astra Pro
В дополнение к разделу Body, Footer Widgets, Footer Bar вы получаете опцию для следующих модулей Astra Pro –
Основной заголовок: Чтобы добавить фон к основному заголовку, перейдите в «Внешний вид»> «Настроить»> «Конструктор заголовков». Нажмите на значок шестеренки , как показано на изображении ниже. Перейдите на вкладку Дизайн и прокрутите до параметра Фон . Вы можете выбрать один цвет, цвет градиента или изображение в качестве фона основного заголовка.
Над заголовком : В дополнение к основному заголовку вы также можете добавить фон к разделу заголовка выше.
Пожалуйста, перейдите к Внешний вид>Настроить>Конструктор заголовков . Нажмите на значок шестеренки , как указано на изображении ниже, чтобы получить доступ к разделу заголовка выше. Перейдите на вкладку дизайн и прокрутите вниз до параметра фон . Вы можете выбрать один цвет, цвет градиента или изображение в качестве фона раздела заголовка выше.
Под заголовком: Аналогичным образом вы также можете изменить фон раздела нижнего заголовка.
Фон содержимого: Чтобы изменить фон содержимого, вам нужно перейти к Внешний вид > Настроить > Глобально > Цвета . Прокрутите вниз до раздела Surface Colo r, и вы найдете цвет фона содержимого чуть ниже фона сайта . Как обычно, вы можете выбрать статический цвет, градиент или изображение в качестве фона содержимого вашего веб-сайта.
Фон боковой панели : Боковая панель на веб-сайте WooCommerce играет очень важную роль, и важно, чтобы она настраивалась в соответствии с потребностями ваших клиентов. Чтобы изменить фон боковой панели, перейдите к Внешний вид>Настроить>Боковая панель . Перейдите на вкладку Дизайн , и вы увидите параметр Цвет фона в верхней части страницы под параметром цветов. Вы можете выбрать статический цвет, градиент или изображение в качестве фона содержимого вашего веб-сайта.
Примечание . Параметр «Фон» может быть виден, только если у вас включен модуль «Цвета и фон» в Astra Pro. Также настройка не работает, если у вас на сайте активирована Прозрачная шапка. Чтобы узнать больше о цвете фона прозрачного заголовка, ознакомьтесь с этим документом. Если вы не уверены в том, что такое прозрачный заголовок, следуйте инструкциям здесь.
Параметры фонового изображения
Параметр фонового изображения позволяет выбрать изображение из медиатеки или загрузить новый файл.