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

时间:2013-06-08 11:35:43

标签: css css3 mobile-safari background-image background-position

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

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

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

2 个答案:

答案 0 :(得分:4)

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/

答案 1 :(得分:0)

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

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