是否可以使用javascript同时设置背景和背景图像？

Question

每当我尝试通过javascript设置background和background-image属性时,我只会在元素上获得背景peroperty.为什么会这样？我错过了什么？

divelement.style.background = "url('one.png')"
divelement.style.backgroundImage = "url('two.png')"

// only gets..

<div style="background-image: url("one.png");">

Answer 1

您可以在一个语句中设置多个背景:

divelement.style.background = "url('one.png'), url('two.png')";

在您的代码中,您将覆盖另一个背景,因为两个background和background-imagecss属性都可以设置背景图像.

Answer 2

可以设置多个backgroundImageat style属性.您可以使用backgroundPosition调整图像位置来显示多个单独的位置backgroundImage

var div = document.querySelector("div");
div.style.backgroundImage = "url(http://lorempixel.com/50/50/technics),\
  url(http://lorempixel.com/50/50/nature)";
div.style.backgroundPosition = "0px 0px, 50px 0px";

div {
  width:100px;
  height:50px;
  background-repeat:no-repeat;
}

<div></div>