小编典典

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

css

是否有CSS属性可font-color根据background-color以下图片反转相关内容?


阅读 1299

收藏
2020-05-16

共1个答案

小编典典

有一个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>
2020-05-16