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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

有一个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>

以上是 根据背景颜色反转CSS字体颜色 的全部内容， 来源链接： utcz.com/qa/433399.html

回到顶部