在 HTML 中作为背景颜色输入时, 为什么某些随机字符串会产生颜色 ?
例如,bgcolor="chucknorris"
a 生产量a红色背景红背景:
<body bgcolor="chucknorris"> test </body>
相反,bgcolor="chucknorr"
a 生产量a黄色背景:
<body bgcolor="chucknorr"> test </body>
各种浏览器和平台都存在这种情况。
在 HTML 中作为背景颜色输入时, 为什么某些随机字符串会产生颜色 ?
例如,bgcolor="chucknorris"
a 生产量a红色背景红背景:
<body bgcolor="chucknorris"> test </body>
相反,bgcolor="chucknorr"
a 生产量a黄色背景:
<body bgcolor="chucknorr"> test </body>
各种浏览器和平台都存在这种情况。
当前回答
c
中唯一有效的十六ex 字符巧克力诺瑞斯chucknorris,值转换为:c00c00000000
(无效的所有值为 0).Red = c00c
, Green = 0000
, Blue = 0000
.c00000
是一个砖灰色的灰色灰色色。其他回答
缩略在遗留属性上解析颜色的规则除现有答复中提到的步骤外,还需要采取其他步骤。
一些例子:
oooFoooFoooF
000F 000F 000F <- replace, pad and chunk
0F 0F 0F <- leading zeros truncated
0F 0F 0F <- truncated to 2 characters from right
oooFooFFoFFF
000F 00FF 0FFF <- replace, pad and chunk
00F 0FF FFF <- leading zeros truncated
00 0F FF <- truncated to 2 characters from right
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000 <- truncated to 8 characters from left
BC BC BC <- truncated to 2 characters from right
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000 <- truncated to 8 characters from left
C000000 C000000 C000000 <- leading zeros truncated
C0 C0 C0 <- truncated to 2 characters from right
下面是算法的部分实施。 它不处理错误或用户输入有效颜色的情况 。
function parseColor(input) {
// todo: return error if input is ""
input = input.trim();
// todo: return error if input is "transparent"
// todo: return corresponding #rrggbb if input is a named color
// todo: return #rrggbb if input matches #rgb
// todo: replace unicode code points greater than U+FFFF with 00
if (input.length > 128) {
input = input.slice(0, 128);
}
if (input.charAt(0) === "#") {
input = input.slice(1);
}
input = input.replace(/[^0-9A-Fa-f]/g, "0");
while (input.length === 0 || input.length % 3 > 0) {
input += "0";
}
var r = input.slice(0, input.length / 3);
var g = input.slice(input.length / 3, input.length * 2 / 3);
var b = input.slice(input.length * 2 / 3);
if (r.length > 8) {
r = r.slice(-8);
g = g.slice(-8);
b = b.slice(-8);
}
while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
r = r.slice(1);
g = g.slice(1);
b = b.slice(1);
}
if (r.length > 2) {
r = r.slice(0, 2);
g = g.slice(0, 2);
b = b.slice(0, 2);
}
return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}
$(function() {
$("#input").on("change", function() {
var input = $(this).val();
var color = parseColor(input);
var $cells = $("#result tbody td");
$cells.eq(0).attr("bgcolor", input);
$cells.eq(1).attr("bgcolor", color);
var color1 = $cells.eq(0).css("background-color");
var color2 = $cells.eq(1).css("background-color");
$cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
$cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
});
});
body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result">
<thead>
<tr>
<th>Left Color</th>
<th>Right Color</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
chucknorris
开始于c
,浏览器将它读取为十六进制值。
因为A、B、C、D、E和F是十六进制字符.
浏览器转换chucknorris
至十六进制值,C00C00000000
.
然后C00C00000000
十六进制值转换为RGB 英国GB格式( 由 3 组成 ) :
C00C00000000
⇒R:C00C, G:0000, B:0000
浏览器只需两位数来表示颜色 :
R:C00C, G:0000, B:0000
⇒R:C0, G:00, B:00
⇒C00000
最后,表演bgcolor = C00000
在 Web 浏览器中。
以下是一个例子:
<table>
<tr>
<td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
<td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
<td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
</tr>
</table>
浏览器正在试图转换chucknorris
十六进制颜色代码,因为它不是一个有效的值。
chucknorris
,除c
不是一个有效的十六进制值。c00c00000000
.这似乎主要是与Internet 探索器和歌剧院(12) 因为铬(31)和Firefox(26)都忽略了这一点。
P.S. 括号中的数字是我测试过的浏览器版本。
同样,拉伊尼坎特(印度恰克·诺里斯) 和黑色的阴影相反:
000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
在较轻的音符上
Chuck Norris不符合网络标准。 网络标准符合他的要求。 #BADA55
很抱歉我不同意 但根据传统颜色的分解规则由Yuhong Bao张贴, chucknorris
无等于等于#CC0000
,而是#C00000
,一个非常相似但稍稍不同的红色色调。火狐 颜色Zilla 添加来核实这一点。
规则规定:
chucknorris0
chuc knor ris0
ch kn ri
C0 00 00
我利用这些规则正确解释了以下条件:
LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle
最初的回答者说颜色是#CC0000
其后编辑了答复,以列入更正。
缩略WHEWG HTML 规格有精确的算法用于解析遗留颜色值。
用于分析颜色字符串的 Netscape 经典代码是开源 :网外/流出/外派/外派/外派。 c.
例如,注意每个字符都以十六进制数字进行剖析,然后转换为32位整数未检查溢出溢出量。只有8个十六位数数字适合32位整数,这就是为什么只考虑最后8个字符的原因。在将六位数数字切换为32位整数之后,它们会通过将其除以16而将其切换为8位整数,直到将其切换为8位整数,这就是为什么忽略前位零的原因。
此代码不完全匹配规格中所定义的代码, 但唯一的区别是几行代码。 我想是的这些线条添加(在网景4中):
if (bytes_per_val > 4)
{
bytes_per_val = 4;
}