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

Question

我正在尝试通过 element.style.background 使用 js 应用多个背景图像，但只应用了第一个背景。我知道支持多个背景，因为这是最新的 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>