有一个CSS属性叫做mix-blend-mode，但是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>