【发布时间】：2021-02-07 18:25:44
【问题描述】：
我遇到了一个奇怪的问题，我正在处理的网页拒绝显示某些太亮的颜色。首先要指出颜色可以用肉眼看到，并不是我设置的颜色太接近白色，所以看起来好像没有显示。尤其奇怪的是，大约一个月前，当我上次检查该项目时，它运行良好。现在整个项目无法显示这种颜色。需要指出的是，使用 HEX、RGB 或默认颜色设置的任何更亮的颜色都可以正常工作，这一点很重要。其他变量定义的颜色也可以使用。我试图更改颜色代码以查看，如果我设置了任何足够“明亮”的颜色代码，颜色就会起作用。到目前为止，该页面没有使用任何可以覆盖它的 JS，并且由于任何其他颜色都有效，我不认为问题出在代码本身。
我使用 LESS 作为 CSS 的预处理器，因此我在整个项目中使用颜色变量。这是我定义变量的代码：
@clr-brand: #e4002B;
@clr-primary: white;
@clr-secondary: #fff2f2;
//@clr-primary-dm: #242835;
//@clr-secondary-dm: #2c3040;
@clr-grey: #697684;
@clr-grey-dm: @clr-grey * 2;
我遇到问题的具体颜色是“@clr-secondary”，无论它是文本、背景还是其他任何东西，它都拒绝显示。它只是不起作用。
作为演示，此颜色代码显示得很好，例如：#d9d9d9
然后我使用 mixins 将颜色分配给类，然后我会主动使用这些类将属性设置为 HTML 代码中的元素。这是在我的 main.less 文件中分配颜色的背景类的示例：
.bg-secondary{
background-color: @clr-secondary !important;
}
然后我使用该类将背景设置为元素。这是我的 HTML 将代码设置为元素的示例：
<section id="company-impact">
<!--Company impact text-->
<div class="container-fluid d-flex align-items-center justify-content-center mt-3 height-50 bg-secondary">
<div class="row">
<div class="col text-center">
<h6 class="text-crimson font-bolder text-uppercase pb-2">the connection</h6>
<h1 class="text-black font-bolder mb-2">Explore our impact around <br class="media-mobile media-small">the globe.</h1>
<a href="#" class="hyperlink-static">Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up-right" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#E4002B" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="17" y1="7" x2="7" y2="17" />
<polyline points="8 7 17 7 17 16" />
</svg>
</a>
</div>
</div>
</div>
<!--End of company impact text-->
</section>
正如你在这张图片上看到的https://pic.infini.fr/230vyICA/a4AVjs07.PNG，背景是纯白色的，颜色没有设置。 PhpStorm 本身告诉我，修改后的颜色代码已设置为 bg-secondary 类，正如您在这张图片上看到的 https://pic.infini.fr/BkwWoMY6/5UtmGej0.PNG 我不知道为什么会发生这种情况，因为它以前工作过而且我没有对编码。如果网络标准有更新并且我遗漏了一些东西，请告诉我。如果您看到我的错误，请立即提醒我，以便我最终修复它！我花了几个小时试图弄清楚这一点，但我做不到！
【问题讨论】：
-
图片确实有淡粉色背景。我已经在 iPad 视网膜屏幕和 Windows10 笔记本电脑上尝试过。我只能建议你在几个不同的设备上查看图像，看看你是否能看到它。它肯定在那里。尝试改变屏幕亮度，在某些设置下不太明显。