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的情况下继承实际的背景颜色？
如果没有，您是否可以建议一种更好的方法，使这些标签在没有预设颜色的情况下看起来很好？

P.S。：内容<div>不应该是<li>元素的子元素，因为这些标签共享一些内容。
P.2.2：我不能说得更清楚，我显然知道如何用JS做到这一点。我只是不想。

Answer 1

设置background-color: inherit 会使其获取父元素的背景颜色。

它采用transparent的原因是因为父级（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>

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

2 个答案: