javascript - 如何针对特定的 CSS3 背景层在 CSS 和/或 JS 中进行修改

Question

如这里所述...

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

... CSS3 支持逗号分隔的列表语法，用于在单个元素上分层多个背景。他们的示例 CSS 是这样的:

 background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;

假设我以后只想修改其中一层，比如通过 JS 或使用 :hover 伪类。我如何才能只针对其中一层。

例如，假设我想将 firefox Logo 从 右下角 移动到 右上角，并且我想更改 bubbles.png 要重复的图层。

我如何通过 CSS 实现这一目标？

JS呢？

Answer 1

简单的方法是重新定义 3 个值:

.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}
.box:hover {
background-repeat: repeat,
      no-repeat,
      no-repeat;
background-position: bottom right,
      bottom,
      right;
}

<div class="box"></div>

或者您可以使用 CSS 变量来定义您想要的值，您可以稍后更改它们而不更改其他值:

.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: var(--r,no-repeat),
      no-repeat,
      no-repeat;
  background-position: bottom right,
      var(--p,left),
      right;
}
.box:hover {
   --r:repeat;
   --p:right;
}

<div class="box"></div>

你也可以使用 JS 做同样的事情:

document.querySelector(".box").addEventListener('click',function(e) {
  e.target.style.setProperty('--r','repeat');
  e.target.style.setProperty('--p','right');
})

.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: var(--r,no-repeat),
      no-repeat,
      no-repeat;
  background-position: bottom right,
      var(--p,left),
      right;
}

<div class="box"></div>