根据背景颜色反转CSS字体颜色 [英] Invert CSS font-color depending on background-color

问题描述

有没有CCS属性来反转字体颜色，取决于背景颜色，如下图所示？

解决方案

  .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;颜色：红色width：100％;}。倒置：{background-color：red;颜色：aqua; width：20％;}  

 < div class = inverted-bardata-content =Lorem ipsum dolor sit amet>< / div>  

$ b

Is there a CCS property to invert the font-color depending on the background-color like this picture?

解决方案

There is a CSS property called mix-blend-mode, but it's not supported by IE. I recommend using pseudo elements. If you like to support IE6 and IE7 you can also use two DIVs instead of pseudo elements.

.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字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！