0 作为饱和度和亮度不起作用，但 0% 在 hsl/hsla 中起作用？答案

【问题标题】：0 as saturation and lightness doesn't work but 0% does in hsl/hsla?0 作为饱和度和亮度不起作用，但 0% 在 hsl/hsla 中起作用？
【发布时间】：2016-01-07 04:36:28
【问题描述】：

我正在尝试一个简单的演示，其中我为hsl 中的元素赋予颜色。根据我的所有经验，我知道 CSS 中的 0(ZERO) 是无单位的。如果你想指定 0 作为值，你可以离开单位。

然而，hsl/hsla 似乎并非如此。在 Chrome 和 Firefox 上，它都会导致 无效的属性值。

一个切线相关的问题是这个，但它包含的答案是零应该是无单位的。

Any bug with hsla(0, 0%, 0%, 0), becoming hsla(0, 0, 0, 0)? (missing percent sign)

hsl(0,0,0)     // error
hsl(0,0%,0)    // error
hsl(0,0,0%)    // error

它是专门为使用除零以外的单位而设计的吗？有没有像这样的其他属性必须在零旁边有一个单位？

【问题讨论】：

我不能给你答案，只是一个upvote。
这让我在过去的一个小时里感到困惑。渴望知道为什么。

标签： css colors units-of-measurement hsl

【解决方案1】：

一般hsl是一个定义CSS之外的颜色的概念；

您可以设置的三个参数是Hue S饱和度Lightness：

色调想象一下色轮。设置一个值就像设置一个角度度数。
作为 HSL-CSS-value，它是一个无单位的值；支持正负（即 360 == -720）。
饱和度 - 0% 完全变性（灰度）。 100% 是完全饱和的（全彩色）。
由于 HSL-CSS-value 需要一个百分比值（您可以指定任何 % 值，但它的范围是 0% 到 100%）。
亮度 - 0% 完全暗（黑色）。 100% 完全是浅色（白色）。 50% 是平均亮度。
作为 HSL-CSS 值，您的规则与饱和度相同。
可选的 alpha 值是一个从 0 到 1 的值，用于定义颜色的不透明度。

这里有一个很好的article 的链接以获取更多信息。

编辑：

您假设 color property 可以设置为长度-% 单位值是错误的 - 就像其他仅接受特定范围值的 CSS 属性一样 color 属性有它自己的选项（hsl 是一）;当解析器达到hsl 或hsla 值时，规则是上面的规则（将来解析器可能会为您修复它，但现在它是这样工作的；）

【讨论】：

我明白了，但不使用该装置的真正警告是什么？这不会使它在 CSS 中统一吗？另外，从一般意义上来说，0 应该是无单位的，不管它在哪里使用。

【解决方案2】：

CSS 中的 0 是无单位的，而不是任何 0，否则不可能消除歧义（例如，在简写中）。这是，而不是。

规格：

【讨论】：

color 属性不接受百分比或长度作为值drafts.csswg.org/css-color-3/#colorunits
@maioman - 饱和度和亮度以百分比表示。 100% 是完全饱和，0% 是灰色阴影。 来自规范 - w3.org/TR/css3-color/#hsl-color
@maioman 值有自己的微语法，在 css-color 规范中根据其他类型的值定义。具体来说，在 hsl()/hsla() 中，饱和度和亮度是值。
@PraveenPuglia 因为在 HSL 中，饱和度和亮度是（概念上）百分比。是的，在这种情况下不存在消歧问题，但是 a) 值需要以一种适用于任何地方的方式定义，你不能在这里和那里有不同的百分比解析。 b) 谁知道它未来会如何变化，是否会在这些参数中接受新类型？
关于色调，是的，在 CSS Color Level 4 中它也是一个角度。请参阅：drafts.csswg.org/css-color-4@maioman W3C 规范由于历史原因被称为“建议”，但毫无疑问：它们被浏览器供应商完全视为规范。如果您不了解标准流程，请不要散布错误信息。