CSS 背景位置从位置偏移 x 像素

Question

我在 W3C CSS3 spec 中遇到了 background-position 属性，表示最多可以指定 4 个值来创建偏移量。

取自 W3C 网站的示例

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

这在最新的浏览器中的支持程度如何？我在这里和网上搜索过，但我发现的问题是 2-3 年前的，所以我正在寻找最新的答案。

我知道我可以向图像添加一些额外的像素，使用百分比值或 JS，但在很多情况下，如果可能的话，最好只使用 CSS。

Answer 1

来自MDN，目前浏览器兼容性如下:

Feature                 Basic support              Multiple backgrounds
-----------------------------------------------------------------------------
Chrome                  1.0                        1.0
Firefox (Gecko)         1.0 (1.7 or earlier)       3.6 (1.9.2)
Internet Explorer       4.0                        9.0
Opera                   3.5                        10.5
Safari                  1.0 (85)                   1.3 (312)



Feature                 Four-value syntax
-----------------------------------------------------------------------------
Chrome                  25
Firefox (Gecko)         13.0 (13.0)
Internet Explorer       9.0
Opera                   10.5
Safari                  Nightly WebKit bug 37514

引用: background-position | CSS

其他引用:

• > W3 Schools
• > SitePoint