使用URL覆盖除背景图片以外的所有背景图片

Question

在下面的代码中，我想覆盖.box的背景图像，而不是.foo的背景图像。我想覆盖所有background-image，但以图片为属性的除外。

[liner-gradient，gradient应该被覆盖，但不应该覆盖url。

但是我想使用一些通用代码来做到这一点，因为内容是动态的，我无法预测所有的类名。

我只能使用CSS来完成此操作吗？

.box {
  background-image: linear-gradient(to right, red, yellow);
  height: 50vh;
  width: 100%;
}

.foo {
  height: 50vh;
  width: 100%;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqy1uodNithL90ttojytSP2imO4RC1y3qlm_ebZdRmNWh_8juV9Q');
}

* {
  // override here.
}

Answer 1

CSS

* { background-image: linear-gradient(to right, red, yellow); }

@media (prefers-color-scheme: dark) {
  * { background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqy1uodNithL90ttojytSP2imO4RC1y3qlm_ebZdRmNWh_8juV9Q'); }
}

参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme