对未知背景颜色的CSS继承实际上是透明的

Question

我正在使用<ul>和<li>元素创建一个类似标签的功能,我注意到这种与CSS有关的意外行为background-color: inherit.
人们会认为这inherit实际上并不意味着transparent,而是child.background-color == parent.background-color(原谅伪代码).

我的代码非常简单,但我遇到了一个问题:我正在开发可变条件.这意味着我永远不会知道我的代码将使用什么背景颜色,我不想介绍我自己的.

我准备了一个JSFiddle,其中背景是在页面加载时随机设置的,以模仿我的代码目的地的随机性.显而易见的问题是,活动选项卡的背景颜色预设看起来很糟糕.所以,我把它改成了background-color: inherit.(见JSFiddle 2)

虽然这显然解决了背景问题,但是下面(cg_content)元素的边框再次开始显示,因为该inherit属性的行为类似于transparent设置背景颜色时的行为.

问题是:有没有办法让它在没有Javascript的情况下继承实际的背景颜色？
如果没有,你能否建议一个更好的方法,使这些标签看起来不错,没有预先设定的颜色？

PS:内容<div>不应该是元素的子<li>元素,因为这些选项卡共享一些内容.
PS2:我不能说清楚,我显然知道如何用JS做到这一点.我只是不想.

Answer 1

设置background-color: inherit 确实使它采用父元素的背景颜色.

它的原因transparent是因为父(the li)的背景颜色是 transparent(默认值).

第二个JSFiddle中唯一具有背景颜色集的元素#unknown_background是锚点的曾祖父母.

添加div, ul, li { background-color: inherit; }到样式表的末尾,背景将一直向下继承,边框将不会显示.

Answer 2

按照@mavrosxristoforos的建议发布此内容，值得称赞！这并不是一个答案，而是更多可以添加到此处可用信息的内容。希望这对某些人有用。

如果您只需要一个不会与文本颜色冲突但仍然非常明显的不透明背景：我的解决方案涉及在父元素和子元素上使用currentColor和 过滤器的组合，例如invert,contrast或。brightness

此技巧适用于动态主题，例如浅色、深色甚至彩色主题，无需明确指定这些元素的任何颜色值。这可以与一些现有的 CSS 主题一起使用，这些主题没有使用 CSS 变量定义内容，或者缺少类来仅有条件地更改特定颜色。观察下面的演示。

var root = document.documentElement;
var themeDark = true;

updateTheme( themeDark );

$('.card').on('click', function(){
  themeDark = !themeDark; // switch the theme
  updateTheme(themeDark);
});

function updateTheme(useDarkTheme){
  if (useDarkTheme) {
      root.style.setProperty('--primary','#000');
      root.style.setProperty('--secondary','#333');
      root.style.setProperty('--ternary','#eee');
    } else {
      root.style.setProperty('--primary','#efefef');
      root.style.setProperty('--secondary','#ddd');
      root.style.setProperty('--ternary','#333');
    }
}

/* say you're using a bootstrap theme with some defined colors, 
 * but you want to customize some colors of some elements which
 * have colors defined without CSS variables that you could 
 * have used.
 */

body {
  font-family: sans-serif; font-size: 14px;
  color: var(--primary);
  background: var(--secondary);
  }

.card {
  border: 1px solid #666; border-radius: 6px;
  padding: 1em; margin: 1em;
  user-select: none; cursor: pointer;
  background: var(--ternary);
  }

.card h2 {
  font-size: 24px;
  color: var(--primary);
  }

.card-body {
  border-radius: 6px;
  background: currentColor;
  }

.card-body p { padding: 1em; }

.card-body, .card-body p { filter: invert(1) contrast(1.2) brightness(0.8); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <h2>Title</h2>
  <div class="card-body">
    <p><b>Click to toggle the theme.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>