如何在 CSS and/or JS 中针对特定的 CSS3 背景层进行修改

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 伪 class。我如何才能只针对其中一层。

例如，假设我想将 firefox 徽标从 bottom right 移动到 top right，并且我想将 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>

如何在 CSS and/or JS 中针对特定的 CSS3 背景层进行修改

how to target a specific CSS3 background layer for modification in CSS and/or JS

javascript

css

background

background-image