这个“背景位置”线模棱两可吗？

Question

我just read你是不允许混合值，例如：background-position: top 50%;

但是，我不确定以下几行是否有歧义：

background-position: 0 50%; //can the 0 be confused as 0px?
background-position: 0 50px; //can the 0 be confused as 0%?

我担心它们可能会以一种被禁止的方式凝聚并导致意想不到的错误。

你认为这会发生吗？是什么让你这么认为？

Answer 1

0px 和 0% 是相同的。这就像在物理学中一样 - 没有零单位，说 0cm 或 0in 是没有意义的，它什么都不是。

Answer 2

您可以在 CSS2.1 中将关键字与百分比值或长度值组合...但您不在 CSS2 中（我的意思是 CSS 2.0） .这应该是混乱的根源。

来自 W3C CSS2.0 on background-position

值：[ [ | ]{1,2} | [ [顶部 |中心 |底部] || [左 |中心 |对] ] ] |继承
(...)
值的含义如下：
- 废话
- 废话
- 左上角和左上角（以及 2 打关键字组合）blah

如果只给出一个百分比或长度值，它只设置水平位置，垂直位置为50%。
如果给定两个值，则水平位置在前。
长度和百分比值的组合是允许的，（例如，'50% 2cm'）。
允许使用负数。
关键字不能与百分比值或长度值组合（上面给出了所有可能的组合）。

来自 W3C CSS2.1 on background-position

值：[ [ | |离开 |中心 |正确] [ | |顶部 |中心 |底部 ]？ ] | [ [ 左 |中心 |对] || [ 顶部 |中心 |底部] ] |继承
(...)
如果只指定一个值，则假定第二个值是'center'。
如果至少一个值不是关键字，则第一个值表示水平位置，第二个值表示垂直位置。
允许使用负 和 值。

比较

如果您比较 CSS2.0 和 CSS2.1 中的可能值，很明显您可以组合（百分比和长度）或（关键字），现在可以将三种类型中的任何一种与三种类型中的任何一种组合（OT：你一直被允许只使用 1 个值，第二个值是 50%/center）。

CSS2.1 中的粗体文本和没有任何其他指示也意味着，当您有 2 个值时，您可以有 0、1 或 2 个关键字，因此作为浏览器，您可能会遇到恰好有1 个关键字。

据我回忆，我从未遇到过 IE6+ 的任何问题，只有 W3C 验证器 (jigsaw) 在默认情况下针对 CSS2 或类似的东西进行验证时。
CSS 验证器似乎对body { background-position : 40cm left; } 很满意

CSS2.1 已成为 W3C 建议 近一年（2011 年 6 月 7 日），因此不会引起新的混乱。

Answer 3

不，您的背景位置不是模棱两可的。您可以混合/匹配单位类型。您还指定了两个值，这意味着您可以始终期望浏览器按以下顺序进行解释：

• 第一个值指定水平位置
• 第二个值指定垂直位置

这可能是模棱两可的地方：

如果只指定一个值，则假定第二个值是“中心”。 source

请记住，这与所使用的单位类型无关。如果只指定一个值，则另一个值始终默认为center。

注意this jsFiddle 中唯一提供的值（top）是如何严格用于垂直定位的，这使得另一个值（水平位置）默认为center。相反，如在this jsFiddle 中所见，仅指定left（严格用于水平定位的值）将使垂直位置默认为center。如果只指定了one percentage value 或one pixel value，它似乎默认应用于水平位置。

为了安全和避免歧义，我建议始终指定这两个值。不过，只要你理解了上面的内容，就永远不会有歧义。