对于未知背景颜色的CSS继承实际上是透明的
我正在用<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.：content <div>不应该是<li>元素的子元素，因为这些选项卡共享一些内容。
P.S.2:我不能说得更清楚了，我显然知道如何用JS来做这件事。我只是不想。
回答 2
Stack Overflow用户
发布于 2013-10-27 09:45:25
设置background-color: inherit 确实是，这会使它接受父元素的背景色。
之所以采用transparent，是因为父( li) 的背景颜色是 transparent (默认值)。
第二个JSFiddle中唯一有背景颜色集的元素是#unknown_background，它是锚的曾祖父。
将div, ul, li { background-color: inherit; }添加到样式表的末尾，背景将一直被继承，边框不会显示出来。
Stack Overflow用户
发布于 2020-12-19 03:19:12
按照@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>
https://stackoverflow.com/questions/19616629
复制相似问题
腾讯云开发者
