How to Invert CSS Font Color Based on Background Color?

Invert CSS Font Color Based on Background Color

Achieving font color inversion based on background color is a common design requirement. This question explores how to accomplish this using CSS.

Solution: Mix-Blend-Mode (Limited Support)

The mix-blend-mode CSS property allows color mixing based on the underlying background color. However, this property is not supported in Internet Explorer.

Solution: Pseudo Elements (Recommended)

The recommended approach for cross-browser compatibility is to use pseudo elements (:before and :after). By placing a colored pseudo element over the text and setting its text color to the desired inverse value, you can create the desired effect.

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

Solution: Two DIVs (IE6 and IE7 Support)

For additional cross-browser support, especially for IE6 and IE7, you can use two DIV elements instead of pseudo elements. This involves absolutely positioning the second DIV over the first and setting its z-index, opacity, and background-color to achieve the desired effect.

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