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

其他参考资料：

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

1 个答案: