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精靈背景，地位的變化跨瀏覽

回答

相關問題