CSS:Safari Mobile 不支持背景位置偏移

Question

我有这个属性有多个背景图片和它们各自的位置:

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

第三张图片的定位在 FF、IE10、Chrome 上工作正常，但不幸的是在 Safari Mobile 上不行。它呈现右侧和顶部的东西但不呈现偏移量(右侧为 15px，顶部为 17px)。我找不到任何关于此的引用。你会如何处理这件事？我会避免手动修改图像添加透明边框来进行偏移。

Answer 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/