25

我正在使用<ul>and<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 做到这一点。我只是不想。

4

2 回答 2

40

设置background-color: inherit 确实会导致它采用父元素的背景颜色。

采用它的原因transparent是因为父级（li）的背景颜色是 transparent（默认值）。

您的第二个 JSFiddle 中唯一具有背景颜色集的其他元素是#unknown_background，它是锚的曾曾祖父母。

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

于 2013-10-27T09:45:25.333 回答
4

按照@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>

于 2020-12-19T03:19:12.237 回答