Можете ли вы связать backgroundImage и backgroundPosition?

Возникли проблемы с выяснением того, как использовать backgroundImage и backgroundPosition с методом DOm. Хотите использовать фоновое изображение и настроить позиционирование

 window.onload = function() {
var slime =  "url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1)";
   document.getElementsByTagName('main').style.backgroundImage = "url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1)";
slime.style.backgroundPosition = '25% 75%';
};

Используйте средство проверки инструментов разработчика браузера, чтобы увидеть ошибки JS. Две насущные проблемы: вам нужно получить один основной элемент, а не коллекцию, и именно этот элемент вам нужно стилизовать, а не строку URL.

A Haworth 18.03.2022 03:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я разбиваю это и добавляю комментарии для ясности (однако то, что @A Haworth сказал выше, верно).

window.onload = function() {
  // define and store image url with proper formatting
  var slime =  "url('https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1')";

  // get the main element from the DOM (there are multiple ways of accomplishing this)
  let main = document.querySelector('main');

  // set background image of main element
  main.style.backgroundImage = slime;

  // set position of background image
  main.style.backgroundPosition = '25% 75%';
)};

Свойства CSS "цепочка" называются стенография, которые могут применяться к некоторым свойствам CSS. К счастью, свойство backgound есть, вот список:

фон:

  • фоновый цвет
  • фоновая картинка
  • фоновый повтор
  • фоновое вложение
  • фоновое положение

Он должен быть в таком порядке, разделенном пробелом, и любое значение может быть опущено (но необходимо хотя бы одно). Итак, ОП будет:

background: url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1) 25% 75%

/* You should add "no-repeat" betwwen -image and -position if the image dimensions 
are smaller than the element's dimension, unless you want a wallpaper effect */

Этот property: value называется набор правил CSS. Чтобы фактически применить любой набор правил CSS к элементу, встроенному со свойством .style, нужно использовать вместе с ним метод .setProperty().

node.style.setProperty(property, value);

const main = document.querySelector('main');

const property = 'background';

const value = `url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1) 25% 75%`;

main.style.setProperty(property, value);
html,
body {
  width: 100%;
  height: 100%
}

main {
  min-height: 100%;
}
<main></main>

Другие вопросы по теме