Question

我试图通过带有js的element.style.background应用多个背景图像，并且只应用了第一个背景。我知道支持多个背景，因为这是最新的chrome，当我用css应用它时它工作正常。

这是我正在做的事情：

document.getElementById("box23").style.background="rgb(255, 255, 255) url(logo.svg) center left / 48px no-repeat, rgb(255, 255, 255) url(animation.gif) center right / contain no-repeat";

但它只适用于第一个背景。

Answer 1

使用以下类创建CSS

.multi_bg_example {
  background-image: rgb(255, 255, 255) url(logo.svg),
                    rgb(255, 255, 255) url(animation.gif);

  background-repeat  : no-repeat,
                       no-repeat;

  background-position: center left,
                       center right;
}

然后是javascrip：

<script>
    document.getElementById("box23").addClass('multi_bg_example');
</script>

Answer 2

此代码例如适用于我：

document.getElementById("container").style.background = "url(http://goo.gl/PLN74m) left top/50% no-repeat, url(http://goo.gl/30JKDs) right top/50% no-repeat";

此处：http://jsfiddle.net/rbkz7jby/

我认为问题可能出现在左中心＆＃34;部分，订单搞砸了，它必须是＆＃34;左中心＆＃34;我相信。与＃34;中右＃34相同。

Answer 3

背景的堆叠是从上到下完成的，因此您需要rgb(255, 255, 255)作为最底层的背景。此外，contain在速记中不起作用。您可以使用backgroundSize属性指定它。

var box23 = document.getElementById("box23");
box23.style.background="url(http://placehold.it/20x20) center left 48px no-repeat, \
                        url(http://placehold.it/40x40) center right 50px no-repeat, \
                        rgb(255, 255, 255)";
box23.style.backgroundSize="48px, contain";

#box23 {
  min-height: 400px;
}

<div id="box23">
</div>

应用js的多个背景图像仅应用第一个

3 个答案: