使用 CSS 将文本颜色设置为红色背景上的白色和白色背景上的黑色文本颜色

Posted 2023-02-23

【中文标题】使用 CSS 将文本颜色设置为红色背景上的白色和白色背景上的黑色文本颜色

【英文标题】：Set text color to white on red background and black text color on white background with CSS

【发布时间】：2021-12-03 11:54:35

【问题描述】：

我需要一个 CSS 样式，当背景为红色时使文本颜色为白色，当背景为白色时使文本颜色为黑色。

我的红色背景颜色如下：#d6002e

我将这个 CSS 添加到我的文本中：

mix-blend-mode: difference;
color: #29FBFF;  // Inverted color of my red

现在看起来像这样：

我的文字得到了背景的反色，这不是我想要的。

【问题讨论】：

这能回答你的问题吗？ Invert CSS font-color depending on background-color

【参考方案1】：

我觉得这应该可以解决问题

.my-red-bg 
    background: #d6002e;
    color: white
  


.my-black-bg 
    background: black;
    color: white