根据背景颜色颠倒CSS字体颜色

是否有一个CCS属性反转字体颜色取决于像这张图片的背景颜色？

Answer 1

有一个名为mix-blend-mode的CSS属性，但IE不支持它。 我build议使用伪元素 。 如果你喜欢支持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> 

Answer 2

是的，现在有了。 使用混合模式，这可以用CSS来完成。

http://jsfiddle.net/1uubdtz6/

 div { position:absolute; height:200px } /* A white bottom layer */ #whitebg { background: white; width:400px; z-index:1 } /* A black layer on top of the white bottom layer */ #blackbg { background: black; width:100px; z-index:2 } /* Some white text on top with blend-mode set to 'difference' */ span { position:absolute; font-family: Arial, Helvetica; font-size: 100px; mix-blend-mode: difference; color: white; z-index: 3 } /* A red DIV over the scene with the blend-mode set to 'screen' */ #makered { background-color: red; mix-blend-mode: screen; width:400px; z-index:4 } 

 <div id="whitebg"></div> <div id="blackbg"></div> <div id="makered"></div> <span>test</span>