我有这个属性有多个背景图像及其各自的位置:
#my_div {
background-image:url("..."), url("..."), url("...");
background-position:right bottom, right bottom, right 15px top 17px;
}
第三张图片的定位在FF,IE10,Chrome上运行良好..但遗憾的是在Safari Mobile上没有。它呈现正确和顶部但不是偏移(右侧15px,顶部15px)..我找不到任何参考。你会怎么处理这个?我不必手动修改图像,添加透明边框来制作偏移。
答案 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/
它可能比使用伪元素更容易/更清洁。