CSS文本装饰：反转

Question

我很惊讶CSS中没有“text-decoration: reverse”，因为使用JavaScript似乎非常麻烦。例如，将元素的前景色和背景色分别设置为父元素的背景色和前景色。

我注意到了这里提供的JavaScript技巧。

肯定不会那么复杂吧？

- pixelbeat

---

有点跑题，但这个词可能更好的翻译是“反转”，而不是“倒置”。 - Samantha Branham

它被称为“反向视频”，来自终端和curses的时代。同意这很令人困惑，因为你可能期望字符本身被翻转。 - Gringo Suave

Answer 1

你所谓的"reverted"具体是什么意思呢？是指将背景设置为前景色，反之亦然吗？（也许这是一个愚蠢的评论，但如果是这样，那它可不是一种装饰，对吧？）

无论如何，在这里你将面临DRY和MVC之间的斗争:

要么每次都声明一个新的CSS类来实现这一点。虽然这很冗余和痛苦，但你确实将样式与代码分离了。

一般来说：

.mydiv {
   background-color: blue;
   color: red;
   font-family:...;
   (...)
}


.mydiv:hover {
   color: red;
   background-color: blue;
}

• 另一个选项是通过JavaScript来实现。Proxify建议使用jQuery。

  结果可能看起来像这样...（未测试）

$(".invert").map(function (el) {
       var color = el.css("color");
       var bgcolor = el.css("background-color");
       el.css("color", bgcolor).css("background-color",color);
    })

- Paul

Answer 2

将文本的背景和前景样式“反转”的概念并不容易在浏览器中实现。如果在浏览器中允许使用“text-decoration: reverse”，那么背景图像也应该反转到文本上吗？这是现代浏览器无法绘制的。

现在考虑透明度和alpha值。有许多方面使您的“反转”想法在一般情况下难以实现。

- billyswong

---

说得好。我只是在考虑文本中嵌套的<span>标签，所以在那里交换前景和背景颜色是可以的。 - pixelbeat

Answer 3

可以考虑这样做：

var bgColor = "#123456";
var textColor = bgColor.match(/^#([0-8][0-9a-fA-F])+$/g) == null ? "#000000" : "#ffffff";

因此，它在深色背景颜色上使用白色文本，而在较浅的背景颜色上使用黑色文本颜色。

- Antti

Answer 4

你可以尝试使用jQuery，这是一种比普通JavaScript更简单实现相同功能的方法。

- Proxify

Answer 5

看这个 - http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/

- Pavan Kumar

Answer 6

虽然没有可用于反转文本的CSS，但存在一个名为bdo（双向覆盖）的HTML元素和选择器dir =“rtl”，您可以使用它来反转文本。

您可以在页面中反转文本

如果您给它一个类，那么您可以添加其他样式元素，例如，您需要查看此页面的源代码以“阅读”我所做的内容。（附言：您不需要包括 元素，这是为了将代码与此段落的其余部分区分开来...）

您可以在页面中反转文本

.reverso { color: #cc3300; font-size: 200%; }

等等。

希望这有所帮助（O：

- at kuzushisan - Tim