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

Posted 2023-03-05

【中文标题】根据背景颜色反转 CSS 字体颜色

【英文标题】：Invert CSS font-color depending on background-color

【发布时间】：2013-06-03 14:56:39

【问题描述】：

是否有 CSS 属性可以根据 background-color 像这张图片一样反转 font-color？

【问题讨论】：

也检查这个问题：Is it possible to change text color based on background color using css?

【参考方案1】：

有一个名为mix-blend-mode 的CSS 属性，但IE 不支持它。我推荐使用pseudo elements。如果你喜欢支持 IE6 和 IE7，你也可以使用two DIVs 代替伪元素。

.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>

【参考方案2】：

使用mix-blend-mode。

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>

【讨论】：

请注意，使用 mix-blend-mode 可能会破坏您的 CSS 过渡，例如平滑不透明度，因为如果任何子元素具有 mix-blend-mode 样式，则不透明度在 GPU 上不会平滑动画（在至少从今天开始在 Chrome 上）。

This is an overview of the browsers supporting it.

【参考方案3】：

我知道这是一个老问题，但我想添加另一个我在了解 mix-blend-mode 之前一直在使用的解决方案。

这个想法是将信息复制到两层，一个back和一个front，其中back和front 有不同的背景和文字颜色。这些在尺寸和文本上是相同的。在这两者之间，我使用剪切框 div 将 front（顶部）图层裁剪为所需的宽度，显示未剪辑的 front 图层，并显示剪辑窗口外的back层。

这类似于已接受答案中的“Two div”解决方案，但使用了额外的剪切框。此解决方案的优势在于可以根据需要轻松将文本居中，以及简单直接地选择颜色。

html：

<div class='progress' id='back'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='front'>
    </div>
  </div>
</div>

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;

我使用 jQuery 以编程方式设置进度百分比，并确保 front 的宽度与 back 的宽度匹配，并且它们具有相同的文本。这也可以使用纯 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())

这是一个小提琴：Progress bar。

我在 Chrome、Firefox、Microsoft Edge 和 IE 版本 11 中对此进行了测试。

【参考方案4】：

我认为这更容易理解。

*
    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>