为什么会起作用:background-position:右上角-200px

时间:2013-10-14 21:43:53

标签: css background responsive-design offset fluid-layout

我正在尝试使用单个图像作为流体布局/响应式设计中的背景来创建假侧边栏列

虽然标题中的代码在Chrome中运行得很好(其他浏览器尚未经过测试),但我不明白为什么。 W3Schools不记录3个“参数”的使用。 (一个德国网站起初作为参考,但我需要一个英文参考这个问题。这是我提出的第一个。)

只要它是跨浏览器,我就可以正常使用代码。一旦我对Chrome中的设计感到满意,我就会测试浏览器兼容性。

然而,当我尝试使用类似的东西时:

background-position: -200px right -200px;

尝试了不同的变化,它只是失败了。

问题:我首先找不到关于此标记的任何文档...这可能是错误还是有正确的解释?如果它有效,有人可以向我解释我如何正确地解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

根据MDN,背景位置会占用一个位置值,最多可以包含4个值。

在你的情况下,它应该等同于background-position: top -200px right -200px,它是位于元素右上角的位置(-200,-200)的背景图像。

修改的: 正如@Dvir在评论中提到的,W3C也是您可以查看的实际规范。我更喜欢MDN,因为它更加用户友好,同时仍然准确而详细。