为什么 HTML 认为“chucknorris”是一种颜色?

新手上路,请多包涵

为什么某些随机字符串在 HTML 中作为背景色输入时会产生颜色?

例如, bgcolor="chucknorris" 产生 红色背景

 <body bgcolor="chucknorris"> test </body>

相反, bgcolor="chucknorr" 产生 黄色背景

 <body bgcolor="chucknorr"> test </body>

这适用于各种浏览器和平台。这里发生了什么?

原文由 user456584 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 353
2 个回答

这是 Netscape 时代的遗留问题:

缺失的数字被视为 0[…]。不正确的数字被简单地解释为 0。例如,值 #F0F0F0、F0F0F0、F0F0F、#FxFxFx 和 FxFxFx 都是相同的。

它来自博客文章 A little rant about Microsoft Internet Explorer’s color parsing 其中非常详细地介绍了它,包括不同长度的颜色值等。

如果我们依次应用博文中的规则,我们会得到以下结果:

  1. 用 0 替换所有无效的十六进制字符:
    chucknorris becomes c00c0000000

  1. 填充到下一个可被 3 整除的字符总数 (11 → 12):
    c00c 0000 0000

  1. 分成三个相等的组,每个分量代表 RGB 颜色的相应颜色分量:
    RGB (c00c, 0000, 0000)

  1. 将每个参数从右向下截断为两个字符。

最后,给出以下结果:

 RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

这是一个示例,演示了 bgcolor 属性的作用,以生成这个“惊人”的色样:

 <table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

这也回答了问题的另一部分:为什么 bgcolor="chucknorr" 会产生黄色?那么,如果我们应用规则,则字符串为:

 c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

呈现淡金黄色。由于字符串以 9 个字符开头,这次我们保留第二个“C”,因此它以最终颜色值结束。

当有人指出你可以做 color="crap" 时,我最初遇到了这个问题,结果是棕色的。

原文由 dash 发布,翻译遵循 CC BY-SA 4.0 许可协议

很抱歉不同意,但根据 Yuhong Bao 发布的 解析旧颜色值的规则, chucknorris 等于 #CC0000 ,而是 #C00000 ,一种非常相似但略有不同的红色调。我使用 Firefox ColorZilla 附加组件 来验证这一点。

规则规定:

  • 通过添加 0 使字符串的长度为 3 的倍数: chucknorris0
  • 将字符串分成三个等长的字符串: chuc knor ris0
  • 将每个字符串截断为两个字符: ch kn ri
  • 保留十六进制值,并在必要时添加 0: C0 00 00

我能够使用这些规则来正确解释以下字符串:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

说颜色是 #CC0000 的原始回答者已经编辑了他们的答案以包括更正。

原文由 Jeremy Goodell 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏