Question

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

我注意到here

的JavaScript技术

当然不是那么复杂吗？

Answer 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);
    })

Answer 2

“反转”背景和文本的前景风格的概念并不容易实现到浏览器。如果在浏览器中允许“text-decoration：reverse”，那么背景图像是否也会反转到文本上？这不是今天的浏览器可以绘制的。

现在考虑透明度和那些alpha值。有许多方面使你的“逆向”概念在一般情况下不切实际。

Answer 3

你可以尝试使用jQuery，这是一种比普通javascript更简单的方法。

Answer 4

如下：

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

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

Answer 5

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

您可以撤消页面中的文字

如果您再给它一个类，那么您可以添加其他样式元素，例如，您需要查看此页面的源代码以“阅读”我所做的事情。（p.s.你不需要包含元素，那就是将代码与其他模糊区分开来......）

You can reverse the text in your page

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

等等。

我希望有所帮助（O：

Answer 6

结帐 - http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/

CSS text-decoration：反向

6 个答案: