How Can I Dynamically Adjust Font Color Based on Background Color in CSS?

Creating Dynamic Font Colors Based on Background Colors

Using CSS, it's possible to automatically adjust the font color based on the background color, mimicking the effect shown in the provided image.

To achieve this, we'll employ CSS properties and techniques that are widely supported across modern browsers:

Mix-Blend-Mode Property:

While the mix-blend-mode property allows for blending colors dynamically, it's important to note that it's not supported by Internet Explorer (IE).

Pseudo Elements and Class Names:

Instead, we'll leverage pseudo elements and class names to create the desired effect. By placing a child element directly inside a parent element, we can apply specific CSS rules to create a contrasting font color:

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

In this snippet, we assign the data-content attribute to a parent element and use CSS to manipulate the text within its child elements. The :before and :after pseudo elements ensure the desired contrasting effect.

HTML Structure:

To utilize this technique, the HTML structure should resemble the following code:

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

By incorporating these CSS properties and the pseudo element approach, we effectively create dynamic font colors that adapt to the background color, resulting in a user interface component that automatically adjusts for better readability.

The above is the detailed content of How Can I Dynamically Adjust Font Color Based on Background Color in CSS?. For more information, please follow other related articles on the PHP Chinese website!