Javascript background image: Javascript. Как поменять background-image? — Stack Overflow на русском

Leave a Comment / Разное / By /

Фон в стиле HTML DOM Свойство

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

Пример

Стиль фона документа:

document.body.style.background = «#f3f3f3 url(‘img_tree.png’) право без повтора top»;

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

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

Описание

Свойство background устанавливает или возвращает до восьми отдельных фонов свойства в сокращенной форме.

С помощью этого свойства вы можете установить/возвратить один или несколько из следующих (в любом порядок):

9 0029 backgroundSize
Свойство DOM Свойство CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
background-size

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

См. также:

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

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

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

Справочник по CSS: Свойство фона

Синтаксис

Возврат свойства фона:

объект .style .background

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

объект .style.background = «цветное изображение |initial|inherit»

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

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

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

Значение по умолчанию: прозрачный нет повтор прокрутки 0% 0% автоматический padding-box border-box
Возвращаемое значение: Строка, представляющая фон элемента
Версия CSS CSS1

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

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

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

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

Примечание

3 новых свойства были добавлены в CSS3 (1999):

  • фоновая клипса
  • фон-происхождение
  • размер фона

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

Пример

Изменить фон элемента DIV:

document. getElementById(«myDIV»).style.background = «url(‘smiley.gif’) blue repeat-x center»;

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

Пример

Установить цвет фона для документа:

document.body.style.backgroundColor = «red»;

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

Пример

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

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

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

Пример

Установите фоновое изображение без повтора:

document.body.style.backgroundRepeat = «repeat-y»;

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

Пример

Установите фиксированное фоновое изображение (не будет прокручиваться):

document.body.style.backgroundAttachment = «fixed»;

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

Пример

Изменение положения фонового изображения:

document.body.style.backgroundPosition = «справа вверху»;

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

Пример

Возвращает значения свойств фона документа:

document. body.style.background;

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

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


ВЫБОР ЦВЕТА

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

Лучшие ссылки
Справочник по 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.

javascript — изменить фоновое изображение с помощью js

спросил

Изменено 5 лет, 5 месяцев назад

Просмотрено 3к раз

Я не могу изменить фоновое изображение раздела на сайте моего проекта. Я использую этот код в файле js:

 document.getElementsByClassName("home").style.backgroundImage = "url('../images/background4.jpg')";

мой div в html:

также мой файл js находится в project/js/script.js изображения расположены в project/images/background4.jpg а index.html находится в project/index.html

Не могу найти ошибку!

РЕДАКТИРОВАТЬ

Я также пробовал document.getElementById() но это тоже не работает.

  • javascript
  • веб-развертывание
4

Контекст базового пути определяется индексом, а не script.js (это не PHP):

 // index.html = ./project/
// выполнить index.html/js/script.js
// загрузка index.html/images/background4.jpg
документ
  .getElementsByClassName('дом')[0]
    .стиль
      .backgroundImage = "url('images/background4.jpg')";

проверить DevTools: сеть в вашем браузере (щелкните правой кнопкой мыши: проверить).

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

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