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

Inverting Font Color Based on Background Color

In CSS, you may encounter a scenario where you want to invert the font color depending on the background color, achieving an effect similar to the image below:

[Image with alternating white and black text on colored background panels]

CSS Solution:

While a direct CSS property for inverting font color based on background color does not exist, you can achieve this using pseudo elements. Additionally, for compatibility with older browsers like IE6 and IE7, you can employ two DIVs instead of pseudo elements.

Mix-Blend-Mode Property:

CSS has a property called mix-blend-mode, but it's not supported by Internet Explorer. This property allows you to blend the foreground (font color) and background colors to create various effects. However, as mentioned, its limited browser support makes it less practical for this scenario.

Pseudo-Element Approach:

To create the alternating color effect using pseudo elements, insert a :before and :after pseudo element on a parent element with a relative position. Set the content of these pseudo elements to the desired text and adjust their background colors. By controlling the width of the :after pseudo element, you can achieve the inversion effect.

Example Code:

.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%;
}

html {
    font-size: 16px;
}

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

This approach allows you to invert the font color depending on the background color, creating a visually appealing effect in your web designs.

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