在 Chrome 开发工具中，为啥这个 css background-color 淡出但没有被划掉？

Posted 2023-03-06

【中文标题】在 Chrome 开发工具中，为啥这个 css background-color 淡出但没有被划掉？

【英文标题】：In Chrome Dev tools, why is this css background-color faded out but not crossed out?在 Chrome 开发工具中，为什么这个 css background-color 淡出但没有被划掉？

【发布时间】：2020-07-11 03:07:45

【问题描述】：

下面有几个问题。我的菜单栏上的背景是白色的，直到页面下方，我从元素中删除了 class="xxxxxx" 。菜单栏然后变黑，我很困惑为什么在部分 html 元素的页面中更改样式方式会修改导航栏的颜色。我调出 Chrome 开发工具并在菜单部分达到峰值，以查看它是如何获得颜色的。背景颜色是这张图片中的最后一行，“褪色”但没有被划掉。

chrome 开发工具中的背景颜色显示为我想要的白色，但菜单为黑色。我可以验证，如果我添加 element.style background-color: white ，它会再次变回白色。

问题：

Chrome 开发工具中的淡出是什么意思（相对于划掉）？ 关于为什么菜单 div 背景会在我身上变黑，我有什么想法/猜测或事情可以尝试吗？

谢谢， 院长

【问题讨论】：

(1) 您是否已经阅读过this answer，它涵盖了继承和默认样式？ (2) 如果你能提供一支笔来显示你当前的代码，调试点可能会更容易。

这能回答你的问题吗？ Chrome developer tools Style tab showing faded CSS definition, why?

从截图中，你的导航栏没有任何背景。你能放一个代码sn-p重现这个问题吗？ ?

@ZohirSalak 这似乎不一样，因为 text-align 在背景褪色时不会褪色。我读过那篇文章（很好！！所以谢谢）但是，我的身体属性中有一半是如何应用的（没有褪色），而其他的则没有应用（即它们已经褪色了）

ohhh，@TS89，该帖子比其他链接更好地解释了淡出！不错！

【参考方案1】：

好的，所以安装了一些 parallax.js 并出于某种原因将其撕掉修复了所有问题。我认为它动态设置样式等，并且由于某种原因该样式未显示在 chrome 的 css 内容中，因此非常难以调试。卸载视差后，chrome 按预期工作，我可以轻松调试 css。 （不确定这是 chrome 错误/问题还是视差问题）。