根据背景颜色反转 CSS 字体颜色

Question

是否有 CSS 属性可以反转 font-color 取决于 background-color 像这张图片？

原文由 Sebastian Templin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个名为 mix-blend-mode 的 CSS 属性，但 IE 不支持它。我推荐使用 伪元素。如果你喜欢支持 IE6 和 IE7，你也可以使用 两个 DIV 来代替伪元素。

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

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

原文由 tomatentobi 发布，翻译遵循 CC BY-SA 4.0 许可协议