3

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

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

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

4

2 回答 2

4

移动 Safari（以及 Android 浏览器）还不支持四值语法。（参见MDN 关于背景位置的文章）。

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

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

于 2013-06-08T18:54:47.053 回答
0

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

它可能比使用伪元素更容易/更干净。

于 2014-02-14T04:19:02.370 回答