如果你的意思是这样的：

编辑：这是一种只需要一个 HTML 元素的方式，因此在由非 CSS 样式的客户端（如搜索引擎、屏幕阅读器、RSS、“无样式”应用程序等）阅读时不会很奇怪（感谢 Dominic 建议尝试:before和:after）。

http://jsbin.com/UtUlIFO/2/edit

重要的代码（添加你的颜色）：

HTML：<div class="someclass" data-text="Some text">Some text</div>

CSS：

.someclass {     /* bottom half */
  position: relative;
  display: inline-block;
}

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;
}

HTML 属性可以是任何东西——我使用data-text它是因为它是描述性的并且可以避免不良的副作用（例如，你可以使用title，但它会在某些浏览器中创建鼠标悬停）。

如果你想display:block;在主 ( .top) 元素上添加类似的东西width: 100%;到内部 ( .bottom) 元素中，以便填充它。

如果您使用的是 jQuery，您可以非常轻松地将这种样式应用于任何元素，而不必手动输入data-text重复的位：

$('.someElement').each(function(){
  $(this).addClass('someclass').attr('data-text',$(this).text());
});

演示加上其他一些东西，比如多行，填充

令人惊讶的是，这是可能的，尽管我只建议您的网站只关注视觉冲击，代码的语义无关紧要，另外它可能不会在旧浏览器中保持一致。

结果是：

这不是一个很好的解决方案，我敢打赌它不是唯一的解决方案，但它可以满足您的需求。

它要求您有两个文本实例，并且使用绝对定位和一些简单的数学运算，您可以创建此效果。

因此，如果我们有一个容器div，并且在这两个容器中，divs并且在每个容器中都有一个文本实例，那么您可以使用以下HTML结构和CSS属性来实现这一点：

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

这是结果的JSFiddle。:)

还有一个CSS3 属性，只有 webkit 支持，它可以反转颜色：

image {
 -webkit-filter: invert(100%);  
}

还有一个HTML5 Canvas Invert，这是一个例子和完整的代码。它遍历图像中的所有像素，并通过从最大颜色值 255 中减去每个分量来反转红色、绿色和蓝色。

这两种解决方案仍然需要 2 张图像和 CSS 定位。由于兼容性不是很好，我肯定会选择其他答案之一:)