CSS 文本装饰：反向答案

【问题标题】：CSS text-decoration: reverseCSS 文本装饰：反向
【发布时间】：2010-10-14 05:20:41
【问题描述】：

我很惊讶 CSS 中没有“text-decoration: reverse”，因为使用 JavaScript 来实现似乎很尴尬。 IE。将元素的前景色和背景色分别设置为父元素的背景色和前景色。

我注意到 here 的 JavaScript 技术

肯定没那么复杂吧？

【问题讨论】：

有点题外话，但更好的名称可能是“反转”而不是“反转”。
在终端和诅咒时代被称为“反向视频”。同意这令人困惑，因为您可能期望字符本身被颠倒。

标签： javascript html css colors

【解决方案1】：

你说什么恢复了？您的意思是将背景设置为前景色，反之亦然？（也许这是一个愚蠢的评论，但如果是这样，那不是装饰吗？）

无论如何，您将在这里与 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);
    })

【讨论】：

【解决方案2】：

“反转”文本的背景和前景样式的概念在浏览器中实现起来并不容易。如果在浏览器中允许您的“文本装饰：反转”，背景图像是否也应该反转到文本上？这不是今天的浏览器可以绘制的。

现在考虑透明胶片和那些 alpha 值。有许多方面使您的“反向”想法通常无法实施。

【讨论】：

一个公平的观点。我只是考虑在文本上嵌套标签，因此可以在那里交换前景色和背景色。

【解决方案3】：

你可以尝试使用 jQuery，它是实现与普通 javascript 相同的更简单的方法。

【讨论】：

【解决方案4】：

比如：

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

因此，它使用白色文本作为深色背景颜色，使用黑色文本颜色作为较浅背景颜色。

【讨论】：

【解决方案5】：

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

您可以反转页面中的文字

如果你给它一个类，你可以添加额外的样式元素，例如，你需要查看这个页面的源代码来“阅读”我所做的事情。（附注：您不需要包含元素，这是为了将代码与本简介的其余部分区分开来......）

You can reverse the text in your page

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

等等。

希望对您有所帮助（O：

【讨论】：

【解决方案6】：

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

【讨论】：