SVG精灵背景位置crossbrowser变化

时间:2013-09-29 09:55:28

标签: css css3 svg

这是一个转贴 SVG as background Image, cross browser compatibility

因为我觉得我没有得到答案,因为我的问题含糊不清,所以我再次发布这个。

我在svg精灵的偏移(背景位置)问题与不同的浏览器不同。 显然,需要针对不同的浏览器调整偏移量。即

//Chrome Safari
.some{
      background: transparent url('some.png') no-repeat -X1px -Y1px;
      background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px -Y2px;
      width: 53px;
      height: 14px;
      position: relative;
      top: 13px;
      left: 30px;
}
//Mozilla
.some:not(:-moz-handler-blocked){
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px (-Y2+4)px;
}
 /IE9
.ie9 .some {
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px (-Y2+8)px;
}

因此,需要对Y偏移进行调整。

对于同一浏览器,通常在精灵精灵中的不同背景图像的偏移量是不同的。 有更简单的方法吗?

1 个答案:

答案 0 :(得分:3)

所以经过一些打击和试验后,发现需要为你的背景css提供背景大小。 这将导致所有浏览器的背景位置相同。

.some{
    background: transparent url('some.png') no-repeat -X1px -Y1px;
    background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px -Y2px;
    width: 53px;
    height: 14px;
    position: relative;
    top: 13px;
    left: 30px;
    background-size:sizeXpx sizeYpx;
}