这种“背景位置”线是否含糊不清?

时间:2012-03-25 03:05:26

标签: html css background-position

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%?

我担心的是,他们可能会以禁止的方式凝聚并导致意外的错误。

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

3 个答案:

答案 0 :(得分:6)

0px和0%完全相同。就像在物理学中一样 - 没有单位为零,说0cm或0in是没有意义的,它只是没有。

答案 1 :(得分:3)

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

来自W3C CSS2.0 on background-position

  

价值:[[< percentage> | <长度> ] {1,2} | [[顶部|中心|底部] || [左|中心|右]]] |继承
  (...)
  值具有以下含义:
   - < percentage> <百分比> 嗒嗒
   - < length> <长度> 嗒嗒
   - 左上角和左上角(以及2个数十个关键字组合) blah

     

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

来自W3C CSS2.1 on background-position

  

价值:[[< percentage> | <长度> |离开|中心|右] [< percentage> | <长度> |顶部|中心|底部]? ] | [[left |中心|对] || [顶部|中心|底]] |继承
  (...)
  如果只指定了一个值,则假定第二个值为“中心”   如果至少有一个值不是关键字,则第一个值代表水平位置,第二个值代表垂直位置。
  负百分比<百分比>和<长度>值是允许的。

比较

如果比较CSS2.0和CSS2.1中的可能值,很明显你可以组合(百分比和长度)OR(关键字),现在可以将三种类型的值中的任何一种与三种类型中的任何一种组合(OT:你被允许永远只使用1个值,第二个值则是50%/中心)。

粗体文本和CSS2.1中没有任何其他指示也意味着,当你有2个值时,你可以拥有0,1或2个关键字,这样你就可以作为浏览器遇到确切的情况1个关键字。

从我记得的情况来看,IE6 +从未遇到任何问题,只有W3C验证器(jigsaw)在默认情况下对CSS2进行验证时才会出现问题。
CSS验证器似乎对body { background-position : 40cm left; }

感到满意

CSS2.1 近一年(2011年6月7日)已成为 W3C推荐,因此不会引起新的混淆。

答案 2 :(得分:1)

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

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

这可能含糊不清:

如果只指定了一个值,则假定第二个值为“中心”source

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

请注意this jsFiddle中唯一提供的值(top)是否严格用于垂直定位,默认情况下会使另一个值(水平位置)center。相反,如this jsFiddle所示,只指定left(严格意义为水平定位的值)将默认为垂直位置center。如果仅指定one percentage valueone pixel value,则默认情况下它似乎适用于水平位置。

为了安全起见并避免含糊不清,我建议始终同时指定两个值。但是,只要您了解上述内容,就不应该含糊不清。