Question

我有这个属性有多个背景图像及其各自的位置：

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

第三张图片的定位在FF，IE10，Chrome上运行良好..但遗憾的是在Safari Mobile上没有。它呈现正确和顶部但不是偏移（右侧15px，顶部15px）..我找不到任何参考。你会怎么处理这个？我不必手动修改图像，添加透明边框来制作偏移。

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/

Answer 2

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

它可能比使用伪元素更容易/更清洁。

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

2 个答案: