Html 根据背景颜色反转 CSS 字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16981763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invert CSS font-color depending on background-color
提问by Sebastian Templin
Is there a CSS property to invert the font-colordepending on the background-colorlike this picture?
是否有一个 CSS 属性可以font-color根据background-color这张图片来反转？
回答by tomatentobi
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 DIVsinstead of pseudo elements.
有一个名为mix-blend-mode的 CSS 属性，但 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>回答by fanfare
Yes, now there is. Using mix-blend-mode, this can be done with CSS.
是的，现在有了。使用mix-blend-mode，这可以通过 CSS 来完成。
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>At the moment, this is bleeding edge and isn't widely supported by all browsers--it might be standard some day, though. You probably need to enable the blend-modes feature for this to work properly.
目前，这是最前沿的，并没有得到所有浏览器的广泛支持——不过，它可能有一天会成为标准。您可能需要启用混合模式功能才能正常工作。
回答by lurker
I know this is an old question, but I wanted to add another solution I've been using before I learned of mix-blend-mode.
我知道这是一个老问题，但我想添加另一个我在了解mix-blend-mode.
The idea is to have the information duplicated in two layers, a backand a front, where the backand fronthave different background and text colors. These are identical in dimension and text. In between, I use a clipping box divto crop the front(top) layer to the desired width, showing the frontlayer where it is not clipped, and revealing the backlayer outside of the clipping window.
这个想法是在两层中复制信息，一个back和 a front，其中back和front具有不同的背景和文本颜色。这些在尺寸和文本上是相同的。在两者之间，我使用剪切框div将前（顶层）图层裁剪为所需的宽度，显示未剪切的前图层，并在剪切窗口外显示后图层。
This is similar to the "Two div" solution in the accepted answer, but uses the extra clipping box. What's advantageous in this solution is the easy centering of text if desired, and simple, direct selection of the colors.
这类似于已接受答案中的“Two div”解决方案，但使用了额外的剪辑框。该解决方案的优势在于，如果需要，可以轻松将文本居中，并且可以简单、直接地选择颜色。
HTML:
HTML：
<div class='progress' id='back'>
<span></span>
<div class='progress' id='boundbox'>
<div class='progress' id='front'>
</div>
</div>
</div>
CSS:
CSS：
.progress {
display: block;
margin: 0;
/* Choose desired padding/height in coordination with font size */
padding: 10px;
height: 28px;
}
#back {
position: relative;
/* Choose a border to your liking, or none */
border: 1px solid lightgray;
/* Choose your desired text attributes */
text-align: center;
font-family: Calibri, "Sans Serif";
font-size: 16pt;
/* Set the desired width of the whole progress bar */
width: 75%;
/* Choose the desired background and text color */
background-color: white;
color: black;
}
#front {
position: absolute;
left: 0;
top: 0;
/* Choose the desired background and text colors */
background-color: navy;
color: white;
}
#boundbox {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
I use jQuery to programmatically set the percent progress and make sure that the width of the frontmatches that of the back, and that they have the identical text. This can also easily be done with pure Javascript.
我使用jQuery编程设置的百分比进度，并确保在宽度前面比赛的的背面，和他们有相同的文字。这也可以使用纯 Javascript 轻松完成。
// Set *front* width to *back* width
// Do this after DOM is ready
$('#front').width($('#back').width())
// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45 // obtain this value from somewhere; 45 is just a test
$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())
And here's a fiddle: Progress bar.
这是一个小提琴：Progress bar。
I tested this in Chrome, Firefox, Microsoft Edge, and IE version 11.
我在 Chrome、Firefox、Microsoft Edge 和 IE 版本 11 中对此进行了测试。
回答by Cristian Ismael Gramajo
I think this is more simple to understand.
我觉得这个更容易理解。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.titulo{
text-align: center;
margin: 2em;
}
.padre{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10em;
position: relative;
width: 1000px;
height: 500px;
}
.caja-1{
background-color: black;
width: 500px;
height: 500px;
left: 0;
mix-blend-mode: screen;
position:absolute;
}
.caja-3{
width: 500px;
height: 500px;
display: flex;
background-color: white;
position: absolute;
right: 0;
}
.texto{
font-size: 5em;
color: white;
mix-blend-mode: difference;
position:absolute;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ESTILOS CONTRASTADOS CSS3</title>
</head>
<body>
<h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1>
<div class="padre">
<div class="caja-1"></div>
<div class="caja-3"></div>
<h1 class="texto">CODE STOCK CENTER</h1>
</div>
</body>
</html>