background-color - 为什么html觉得"chucknorris"是一个颜色?

  显示原文与译文双语对照的内容

为什么某些随机字符串在HTML中作为背景颜色时产生各种颜色? 例如:

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

。在所有浏览器和平台上生成一个带有的文档。

有趣的是,虽然 chucknorri 也产生了红色背景,chucknorr 产生黄色背景。

.这里正在做什么?

时间:

这是网景时代的一个延续:

丢失的数字被视为 0 [...] 。 不正确的数字被解释为 0. 例如值 #F0F0F0, F0F0F0,F0F0F,#FxFxFx 和FxFxFx都是相同的。

,这个博客张贴了,它包含了大量的细节,包括不同的颜色值等。

如果我们从博客文章中依次应用规则,我们会得到以下信息:

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

    
    chucknorris becomes c00c0000000
    
    
  2. 切换到可以被 3 ( 11 -> 12 ) 整除的字符总数

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

    
    RGB (c00c, 0000, 0000)
    
    
  4. 将每个参数从右侧截断到 2个字符

这给出了以下结果:


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" 和它,嗯,出来的是棕色。

我很抱歉,但是根据 @Yuhong 包发布的传统颜色值的规则,chucknorris 并不等同于 #CC0000,而是 #C00000,它是一个非常相似但稍微不同的红色色调。 我使用了 Firefox ColorZilla add-on 来验证这个。

规则状态:

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

不幸的是,我还无法确定为什么这似乎不适用于 adamlevine,它应该是 ADE0E0 但实际上是 AD0E0E

更新:原始的answerers谁说的颜色是 #CC0000 自从编辑他们的答案包括修正。

大多数浏览器将忽略颜色字符串中的任何NON-hex值,用零替换NON-hex数字。

ChuCknorrisc00c0000000 翻译。此时,浏览器会将字符串分成三个相等的部分,表明红绿色和蓝色值: c00c 0000 0000 。每个部分中的额外位将被忽略,这将使最终结果为红色。

注意,这个不适用于css色彩解析,遵循标准的css。


<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as 上面</font></p>
<p><span style="color: chucknorris">Black</span></p>

浏览器试图将 chucknorris 转换为十六进制颜色代码,因为它不是一个有效值。 在 chucknorris 中,除了 c 以外的所有内容都不是有效的十六进制值。 所以它被转换为 c00c00000000#c00000,一片红色的阴影。

这似乎是一个问题主要是与 IEOpera ( 12 ) 既是 Chrome ( 31 ) 和 Firefox ( 26 ) 无视这一点。

P.S 。括号里的数字是我测试的浏览器版本。

...