SVG精灵背景，地位的变化跨浏览

这是一个重新发布 SVG as background Image, cross browser compatibility SVG精灵背景，地位的变化跨浏览

因为我觉得我没有得到一个答案，因为我的问题是含糊不清，我再次发布此。

我有一个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偏移进行调整。

而且对于同一个浏览器，在不同的背景图像中，偏移对于不同的背景图像通常是不同的。有没有更简单的方法呢？

来源

2013-09-29 Mudit Tuli

这些'-X1px -Y1px'不是香草CSS3，是吗？如果您使用预编译器（SASS，LESS等），则应将其标记在标记中。 –

因此，经过一些命中和试用后，发现需要为背景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; 
}

来源

2013-10-01 05:06:15

SVG精灵背景，地位的变化跨浏览

回答

相关问题