如何將背景圖像設置爲正中，仍然使用精靈？

在以下情形請看：如何將背景圖像設置爲正中，仍然使用精靈？

enter image description here

通常你會包括背景圖像和將其設置爲「右中心」。無論如何有這個，但有語音氣泡來自一個精靈（包含多個不同的圖像）元素有一個未知的寬度？

我正在考慮使用：after僞元素，但是我需要提供IE7支持。

我想避免額外的HTML標記，因此我很好奇，如果只有CSS的情況存在。

任何人有任何想法呢？

謝謝

來源

2012-05-21 digitalclubb

取決於你的精靈，我認爲。如果它包含下面的所有圖標，請閱讀縮小但非常高的圖像，這應該不成問題。除此之外，你可能想看看背景圖像裁剪，但我不確定有關IE7。 – Paul

YouTube使用常見的修復方法，只是一個1像素的透明gif，將其拉伸以適應所需圖像的寬度，然後應用sprite圖像並使用CSS進行定位。我個人認爲@ digitalclubb可能會更好，如果你想避免添加額外的標記。 – cchana

你可以使用一個css僞元素，例如：before或：after。只需將您的僞元素的大小和位置放在需要的位置即可。內容屬性很重要，否則它不會顯示。

#divid:after { 
    width: 10px; 
    height: 10px; 
    margin: -10px 0 0 -10px; 
    position: absolute; 
    background: url('sprite.png') -20px -15px no-repeat; 
    content: ' '; 
}

來源

2012-05-21 15:52:58 codybuell

我很想去這條路線，但：在IE7（我不得不支持）不支持之後。想想我只需要在我的標記中加入跨度：（ – digitalclubb

@digitalclubb你也可以使用Modernizr，它們支持CSS生成的內容。需要一些額外的工作，但可以節省時間。 – codybuell

如何將背景圖像設置爲正中，仍然使用精靈？

回答

相關問題