CSS：Safari Mobile 不支持背景位置偏移答案

【问题标题】：CSS: Safari Mobile doesn't support background-position offsetCSS：Safari Mobile 不支持背景位置偏移
【发布时间】：2013-06-08 11:35:43
【问题描述】：

我有这个属性，有多个背景图像和它们各自的位置：

#my_div {
    background-image:url("..."), url("..."), url("...");
    background-position:right bottom, right bottom, right 15px top 17px;
}

第三张图片的定位在 FF、IE10、Chrome 上运行良好。但不幸的是，在 Safari Mobile 上不行。它呈现正确和顶部的东西，但不呈现偏移量（右侧为 15px，顶部为 17px）。我找不到任何关于此的参考。你会如何处理这个问题？我会避免必须手动修改图像添加透明边框来进行偏移。

【问题讨论】：

标签： css mobile-safari background-image background-position

【解决方案1】：

Mobile Safari（以及 Android 浏览器）还不支持四值语法。（见MDN article on background-position）。

一种可能的解决方法是提取应该具有偏移量的背景图像并将其放入具有相应偏移量的伪元素中。

#my_div:before{
  content: '';
  display: block;
  position: absolute;
  z-index: -1;

  height: 50px; /* Height of your image / parent div */
  width: 50px; /* Width of your image / parent div */

  /* Your offset */
  top: 17px; 
  right: 15px;

  background-image: url("...");
  background-position: right top;
}

为了更容易理解，我创建了一个 jsFiddle：http://jsfiddle.net/pKWvp/1/

【讨论】：

感谢您的解释 :) 。您知道他们是否计划在 Mobile Safari（和 Android 浏览器）上支持此功能？
我不确定，但 WebKit Nightlies（= Safari 和 Mobile Safari 背后的渲染引擎的 alpha 版本）已经支持四值语法。因此可以预期它会出现在下一个版本中。不过对Android一无所知。
我喜欢这个解决方案，但是如果你想将背景图片垂直居中，它就行不通了，并且元素的高度是动态的
对于具有流动尺寸的元素，如果您要指定右侧空间或底部空间，并让另一个尺寸居中，最好的跨浏览器/平台方式是添加一个为图像本身清空透明空间并执行诸如 background-position: right center; 之类的操作或背景位置：中心底部

【解决方案2】：

您也可以尝试使用 css calc 函数：http://briantree.se/quick-tip-02-use-css-calc-properly-position-background-images/

这可能比使用伪元素更容易/更简洁。

【讨论】：

哦，对不起，我以为你的问题是关于背景定位的问题。右侧 15px 和顶部 17px 偏移。
天哪。我的错。我换了问题... -.- 我以为你回答了我打开的另一个问题。对不起：D