如何针对CSS和/或JS中特定的CSS 3背景层进行修改?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (63)

如此处所述......

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徽标从中移动bottom right到,top right并且我想要更改bubbles.png要重复的图层。

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

JS怎么样?

提问于
用户回答回答于

最简单的方法是重新定义以下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>

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动