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

Question

我刚刚读到您不允许混合值，例如：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} | [ [顶部 | 中心 | 底部] || [左 | 中心 | 对] ] ] | inherit
(...)
值有以下含义：
- <percentage> <percentage> blah
- <length> <length> blah
- top left 和 left top（以及 2 打关键字组合）blah

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

来自 W3C CSS2.1 on background-position

值：[ [ <百分比> | <长度> | 离开 | 中心 | 正确] [ <百分比> | <长度> | 顶部 | 中心 | 底部 ]？] | [ [ 左 | 中心 | 对] || [ 顶部 | 中心 | 底部] ] | inherit
(...)
如果只指定了一个值，则假定第二个值是“中心”。
如果至少一个值不是关键字，则第一个值表示水平位置，第二个值表示垂直位置。
允许使用负 <percentage> 和 <length> 值。

比较

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

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

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

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

这可能是模棱两可的：

如果仅指定一个值，则假定第二个值为 'center'。资源

请记住，这忽略了正在使用的单位类型。如果仅指定一个值，则始终center默认为另一个值。

请注意，在这个 jsFiddle中，唯一提供的值 ( top) 是如何严格用于垂直定位的，这center默认情况下会生成另一个值（水平位置）。相反，正如在这个 jsFiddle中看到的那样，只有指定left（严格用于水平定位的值）才会center默认设置垂直位置。如果仅指定了一个百分比值或一个像素值，则默认情况下它似乎适用于水平位置。

为了安全并避免歧义，我建议始终指定这两个值。但是，只要您了解以上内容，就永远不会有歧义。