In recent days, several students have asked the same question.

There is a paragraph of text on the page. Can I make this text show different colors against different background colors? Also known as intelligent color change. Something like this:

Text appears white on a black background and black on a white background. It seems to be a very complicated effect, but in fact, it is very easy to achieve in CSS. Today, I will introduce such a small skill. In CSS, using the mix mode mix-Blx-mode: difference, let the text intelligently match the background color.

Mix mode mix-blending-mode: difference

CSS3 has added a new feature called mix-blend-mode, which is a blend mode. There are some blending modes as shown below:

Among them, the protagonist of this paper is mix-blending-mode: difference, which means the difference mode. The blend mode looks at the color information in each channel, compares the background color with the drawing color, and subtracts the pixel value of the darker pixel from the pixel value of the brighter pixel.

Mixing with white will invert the background color; Mixing with black produces no change.

In general, the light area of the top layer inverts the color of the bottom layer, while the dark area shows the color as normal. The effect is exactly the opposite of the original color.

The most common application scenario of this blending mode is the scene described at the beginning of the article, which enables the text to display different colors under different background colors.

Best suited for black and white scenes, a very simple DEMO:

<div></div>
Copy the code
div {
    height: 100vh;
    background: linear-gradient(45deg.# 000 0.# 000 50%.#fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3sinfinite linear alternate; }}@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%); }}Copy the code

The effect is as follows:

CodePen Demo — linear-gradient + Mix-blend-mode

, of course, is not necessarily the black or white, look at the example below, there is a scene, there are times when we aren’t sure about the background color of the final performance value (configuration, may be the background to the front), but also need to let the text can be normal in any background color display, at this point, also can try to use the mix – blend – mode: Difference.

<ul class="flex-box">
  <div class="box">
    <p>Open member to view my VIP level</p>
  </div>/ /...</ul>
Copy the code
div{// Uncertain background color}p {
    color: #fff;
    mix-blend-mode: difference;
}
Copy the code

elements with mix-blend-mode: difference set will display text normally regardless of the background color:

CodePen Demo — mix-blending-mode :difference implement text color adaptive background color

Mix blend – mode: the difference of faults

Of course, this method is not perfect, because the color superimposed by mix-blending-mode :difference and background color can be displayed normally, but it may not be the most suitable color and the best color.

When it comes to practical use here, in non-black and white Settings, more experimentation is needed.

The last

To sum up, this article introduces a tip for using CSS blend mode to adapt text to background display. If you are interested in blend mode, I recommend you to check out my article below:

  • Incredible mix mode mix-blending-mode
  • Incredible blend mode background-blending-mode
  • Two lines of CSS code to achieve the image arbitrary color color technology
  • Use CSS skillfully to build gradient color TWO-DIMENSIONAL code
  • CSS exotic curiosity-a solution looking | use mixed text pattern implementation hollow out the wave effect
  • Explore the failure of CSS 3D caused by CSS mixed mode filter
  • CSS Art – Use background to create beautiful backgrounds

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.