某些鲜艳的颜色无法在网页上显示

问题描述

我遇到了一个奇怪的问题，我正在处理的网页拒绝显示某些太亮的颜色。首先要指出颜色可以用肉眼看到，并不是我设置的颜色太接近白色，所以它看起来好像没有显示。特别奇怪的是，大约一个月前，当我上次检查该项目时，它工作得很好。现在整个项目都无法显示这种颜色。需要指出的是，使用 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 我不知道为什么会发生这种情况，因为它以前工作过而且我没有做过任何对代码的更改。如果网络标准有更新，但我遗漏了什么，请告诉我。如果您看到我的错误，请立即提醒我，以便我最终修复它！我花了几个小时试图弄清楚这一点，但我就是做不到！

解决方法

第一张图片的背景不是白色，而是您定义的颜色与白色略有不同。您的代码正在运行！

html less