某亮colors网页拒绝显示

Question

I have encountered a strange issue in which a webpage that I'm working on refuses to display certain colors that are too bright. First thing to point out the color can be seen by a naked eye it's not that I am setting a color that's too close to white so it appears as if it wasn't displaying. The especially weird thing about this is that it worked just fine about a month ago when I checked the project last time. Now the entire project cannot display this color. It's important to point out that any brighter color set with HEX, RGB or the default colors work without any issues. Other variable defined colors also work. I have tried to change the color code to see and if I set any color code that is "bright" enough the color works. So far the page is not using any JS that could overwrite this and since any other color works I don't believe that the issue is in the code itself.

I am using LESS as a preprocessor for CSS and so I am using color variables for the entire project. This is my code defining the variables:

@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;

The specific color that I am having problems with is the "@clr-secondary" which refuses to display no matter if it's a text, background or anything else. It just doesn't work.

As a demonstration this color codes displays just fine for example: #d9d9d9

I then use mixins to assign the colors to classes which I then actively use to set the properties to elements in the HTML code. This is an example for the background class assigned the color in my main.less file:

.bg-secondary{
  background-color: @clr-secondary !important;
}

I then use the class to set the background to an element. This is an example of my HTML setting the code to an element:

<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>

As you can see on this image https://pic.infini.fr/230vyICA/a4AVjs07.PNG the background is plain white and the color is not set. PhpStorm itself tells me that the modified color code has been set to the bg-secondary class as you can see on this picture https://pic.infini.fr/BkwWoMY6/5UtmGej0.PNG I have no idea as to why this happens since it worked before and I haven't made any changes to the code. If there has been an update to the web standards and I am missing something please let me know. If you see my error please alert me right away so that I can finally fix it! I spend hours trying to figure this out but I just couldn't!

Answer 1

The background on the 1st image is NOT white but that your defined color is a little bit of different than white. your code is working!