Javascript image background: HTML DOM Style backgroundImage Property

Содержание

Стиль 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
Top3 Reference

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-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

38 Фоновые эффекты JavaScript

Коллекция отобранных вручную бесплатных ванильных фоновых эффектов JavaScript примеров кода: изменение цвета фона или изображения, анимированное, с холстом и т. д. Обновление коллекции за февраль 2020 года. 24 новинки.

  1. Анимированные фоны CSS
  2. Фоновые плагины jQuery
О коде

Окружающий фон в оттенках серого

Фон частиц.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: easyljs.js, tweenmax.js

О коде

BVAmbient — Фоновые частицы VanillaJS

Простой в использовании фон частиц, созданный с помощью VanillaJS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: bootstrap.css, bvambient.js

О коде

Изменение цвета фона с помощью GSAP ScrollTrigger

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: локомотив-scroll.css, gsap.js, локомотив-scroll.js

О коде

Шаблоны Юникода

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Эффект при наведении курсора для сетки фонового изображения

Краткое руководство о том, как добиться эффекта наведения при наведении на сетку фонового изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Холст JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Движение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: victor.js, chroma.js, simplex-noise.js, tweakpane.js

О коде

1337 Матрица

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Сетчатые черви

Анимирует связанные узлы сетки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Привет Матрица

Hello World на 92 языках, падающих под дождем матричного кода.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Привет Свет

DYNAMIC_DRAW и bufferSubData комбо

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Случайный шеврон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Случайное, Cos и Sin

Нажмите, чтобы рандомизировать.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: three.js, chroma.js

О коде

Разноцветные круги

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Разноцветные квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Оранжевые квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Колебание

Играйте с красочной шаткой поверхностью. Интерактивная игрушка-мышь. Заставьте поверхность прыгать и качаться.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Изменение формы фона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Решетка Трюше

Генератор мозаичного фона, использующий плитки трюше с чередующейся окраской.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: p5.js

О коде

Поле потока N.2

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: p5.js

О коде

Обязательный падающий снег

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: sparticles.js, dat.gui.js, stats.js

О коде

Метаболы — WebGL

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Заполнить фон анимацией

Итерировать каждый элемент на странице, раскрашивая их.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Тройные обои «А»

Нажмите, чтобы открыть новый шаблон.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: css-doodle.js, webfont.js

О коде

Светлячки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фоновая текстура в нескольких разделах

Отображение одной фоновой текстуры на нескольких разноцветных элементах div

s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: nouislider.js

О коде

римд

Переместите мышь или проведите пальцем по сенсорному устройству, чтобы перемещаться по звездам.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Кристаллический параллакс

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированный градиент маски CSS-изображения

Анимированный CSS маска-изображение градиент с JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Круг Spipa

Частицы никогда не сталкиваются друг с другом.

Место становится свободным после определенного количества шагов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: lodash.js

О коде

Фон Вращающиеся квадраты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Шаблон SVG Космос

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: tweenmax.js, drawsvgplugin.js

О коде

Пепельный водопад

Когда я смотрю в этот выжженный мир, падает пепел.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: three.js, ccapture.js

О коде

Разреженный треугольный фон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Изменение цвета

Щелкните в любом месте.

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

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