Question

我在元素上设置了多个背景，然后想要禁用其中一个背景而不重复其他背景。我能以某种方式这样做吗？

我希望获得与下面完全相同的效果，但在B, C, D选择器中不重复:hover, :focus 。

.selector {
  background: A, B, C, D;
}


.selector:hover,
.selector:focus {
  background: none, B, C, D;
}

类似的东西：

.selector {
  background: A, B, C, D;
}


.selector:hover,
.selector:focus {
  background: none,;
}

Answer 1

background:none是一个关键字，会覆盖所有其他语句。

不幸的是，没有重复声明就没有解决方案。你不能覆盖多重声明的部分。

改为使用transparent。

.selector {
  background: A, B, C, D;
}


.selector:hover,
.selector:focus {
  background: transparent, B, C, D;
}

或者只是一起删除第一个背景。

.selector:hover,
.selector:focus {
  background: B, C, D;
}

高级CSS自定义属性（也称为CSS变量）可以在这里提供帮助，但如果将背景定义为“变量”，则只需要在`：hover上更改该变量的定义。

:root {
  --background-a: url(http://www.placebacon.net/100/100);
}

div {
  width: 100px;
  height: 100px;
  background: var(--background-a);
}

div:hover {
  width: 100px;
  height: 100px;
  --background-a: red;
}

<div></div>

Answer 2

您可以简单地将 background-size 属性设置为 0，以便像这样隐藏背景：

background-size: 0, auto, auto, auto;

参考：https://www.designcise.com/web/tutorial/how-to-hide-one-or-more-background-images-when-using-multiple-backgrounds-in-css

如何禁用CSS中的多个背景之一？

2 个答案: