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

发表于 2011-11-29 22:54:22

活跃于 2019-11-14 17:45:02

查看 501,946 次

html   browser   background-color  

在HTML中作为背景色输入时,某些随机字符串如何产生颜色? 例如:

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

...在所有浏览器和平台上产生背景为红色的文档。

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

这里发生了什么?

===============>>#1 票数:6666 已采纳

这是Netscape时代的遗留物:

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

它来自博客文章关于Microsoft Internet Explorer的颜色解析的一点怨言,其中涵盖了非常详细的内容,包括不同长度的颜色值等。

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

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

     chucknorris becomes c00c0000000 
  2. 填充到下一个可被3整除的字符总数(11-> 12)

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

     RGB (c00c, 0000, 0000) 
  4. 将每个参数从右向下截断为两个字符

得到以下结果:

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" ,结果它变成棕色。

===============>>#2 票数:928

抱歉,不同意,但是根据解析@Yuhong Bao发布的旧色值的规则, chucknorris不等于#CC0000 ,而等于#C00000 ,这是一个非常相似但略有不同的红色。 我使用Firefox ColorZilla加载项进行了验证。

规则规定:

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

更新: 原来说颜色为#CC0000的原始答复者已经编辑了他们的答案以包括更正。

  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值