如何使用CSS或JS连接块的两个背景？

.element {
  background-image: url('background1.jpg'), url('background2.jpg');
  background-repeat: no-repeat;
  background-position: top left, top right;
}

.element {
  position: relative;
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background1.jpg');
}

.element::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('background2.jpg');
}

var element = document.querySelector('.element');
element.style.backgroundImage = "url('background1.jpg'), url('background2.jpg')";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundPosition = "top left, top right";