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

Question

是否有一个 CSS 属性可以像这张图片那样根据 background-color 反转 font-color？

Answer 1

有一个名为 mix-blend-mode 的 CSS 属性, 但 IE 不支持。我建议使用 pseudo elements .如果你喜欢支持 IE6 和 IE7，你也可以使用 two DIVs而不是伪元素。

.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>