html - 某些明亮的颜色拒绝在网页上显示

问题描述

我遇到了一个奇怪的问题，我正在处理的网页拒绝显示某些太亮的颜色。首先要指出颜色可以用肉眼看到，并不是我设置的颜色太接近白色，所以看起来好像没有显示。尤其奇怪的是，大约一个月前，当我上次检查该项目时，它工作得很好。现在整个项目无法显示这种颜色。需要指出的是，使用 HEX、RGB 或默认颜色设置的任何更亮的颜色都可以正常工作，这一点很重要。其他变量定义的颜色也可以使用。我试图更改颜色代码以查看，如果我设置了任何足够“明亮”的颜色代码，颜色就会起作用。

我使用 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我不知道为什么会发生这种情况它以前工作过，我没有对代码进行任何更改。如果网络标准有更新并且我遗漏了一些东西，请告诉我。如果您看到我的错误，请立即提醒我，以便我最终修复它！我花了几个小时试图弄清楚这一点，但我就是做不到！

标签： htmlcssless

html - 某些明亮的颜色拒绝在网页上显示

问题描述

解决方案

推荐阅读