Cleverly use CSS blending modes to intelligently adapt text to background color

There is a piece of text on the page. Can this text be displayed in different colors under different background colors? It is also commonly known as intelligent color change. Like the following:

The text appears as white on a black background and as black on a white background. It seems to be a very complicated effect, but it is actually very easy to implement in CSS. Today I will introduce such a little trick. In CSS, use the mixing mode mix-blend-mode: difference to make the text intelligently adapt. Match the background color. [Recommended learning: css video tutorial]

mix-blend-mode: difference

CSS3 has added a very interesting attribute -- mix-blend-mode, where the Chinese free translations of mix and blend are both mix, then the literal translation of this attribute is mix-blend mode. Of course, we usually call it mix mode. There are some mixing modes as shown in the figure below:

Among them, the protagonist of this article is mix-blend-mode: difference, which means difference. model. This blending mode looks at the color information in each channel, compares the base color to the drawing color, and subtracts the pixel value of the darker pixel from the pixel value of the lighter pixel.

Mixing with white will invert the background color; mixing with black will not change it.

To put it simply, the bright area of ​​the upper layer inverts the color of the lower layer, and the dark area displays the color normally. The effect is the completely opposite color to the original image.

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

Most suitable for black and white scenes, a very simple DEMO:

<div></div>

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 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

The effect is as follows:

##CodePen Demo -- linear-gradient Mix-blend-mode

Of course, it is not necessarily black or white. Take a look at the example below. There is such a scenario. Sometimes we don’t quite Determine the final performance value of the background color (may be the background configuration and pass it to the front end), but you need to allow the text to be displayed normally under any background color. At this time, you can also try to use

mix-blend-mode: difference.

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

No matter what the background color is, the

element with mix-blend-mode: difference set can display text normally:

CodePen Demo -- mix-blend-mode:difference implements text color adaptive background

# Disadvantages of ##mix-blend-mode:difference

Of course, this method is not perfect, because the color after

mix-blend-mode:difference

is superimposed with the background color , although it can be displayed normally, it is not necessarily the most suitable color or the best color for display effect. When actually used here, in non-black and white scenes, more experiments are needed to make choices.

Finally

To summarize, this article introduces a little trick to use CSS mixed mode to realize text adaptation background display. If you are interested in mixed mode, I recommend you Take another look at my following articles:

Incredible blending mode mix-blend-mode
Incredible blending mode background-blend-mode
Two lines of CSS code to achieve arbitrary coloring technology for images
Skillfully use CSS to construct gradient color QR codes
CSS tricks | Use blending modes to achieve text hollow wave effect
• ##Explore the CSS 3D failure problem caused by CSS blending modes\filters
• CSS Art--Use background to create various wonderful backgrounds
• Okay, this is the end of this article, I hope it will be helpful to you

Original address: https://www.cnblogs.com/coco1s/p/16012545.html

Author: ChokCoco

(Learning video sharing: web front-end)

The above is the detailed content of Cleverly use CSS blending modes to intelligently adapt text to background color. For more information, please follow other related articles on the PHP Chinese website!