【问题标题】: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】:
          猜你喜欢
          • 2012-04-10
          • 1970-01-01
          • 2014-03-11
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-01-12
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多