CSS精靈與動態漿紗

我決定板條箱精靈表單用於我的整個網站（+ -30圖像），所以我可以加載1個圖像和只是參考位置，從而降低了圖像的加載時間和服務器調用。CSS精靈與動態漿紗

我的問題：是否可以引用精靈表中的圖像，然後將該圖像的大小設置爲其父容器的100％？

因此，例如：

#SomeDiv 
{ 
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat; 
    width:100px; 
}

我div的寬度爲100像素，但我要引用的精靈是20像素（例如） - 我怎麼能streth提取的精靈成長爲100px？

問候，拜倫科布。

來源

2010-09-22 Bob

你不能，除非你使用'背景size'，但瀏覽器的支持，以便在此刻 – 2010-09-22 11:33:15

這是一個CSS3的事情肯定很不好，但我就不會像看起來可怕的呢？除非它是一個純色.. – Kyle 2010-09-22 11:37:52

好吧，如果你真的想一個答案，當然，爲什麼不呢？請參閱：http://jsfiddle.net/3dsgn/3/

基本上我們正在與CSS3在這裏工作，所以IE支持（除9）是不存在的。您還必須在Firefox 3.6及更低版本中使用擴展名爲-moz-的版本。這項技術本身也有些麻煩。你實際上必須自己去計算數字 - 百分比自然不會起作用。

#sprite-large { 

    /* All of these numbers are 2x their normal, 
     though tweaked slightly so that they will look okay */ 
    width: 36px; 
    height: 36px; 
    background: url('url/to/your/image.png') -38px -112px; 

    -moz-background-size: 448px 368px; 
    background-size: 448px 368px; 
}

來源

2010-09-22 12:04:56

如果你擴展指南針......這將是自動的編譯:) – 2012-10-05 10:17:03

偉大的工作。謝謝，我真的需要這一點，我無法自己弄清楚。我只是想還建議添加此：'-webkit-背景大小：448px 368px;'，因爲我看到的圖像渲染，最好與支持WebKit的 – 2013-04-11 22:37:04

@Santz我不認爲這是必要的瀏覽器，因爲從3.0版開始，Chrome和Safari都支持前綴不變的屬性。該前綴的版本是相同的，並不影響圖像渲染 – 2013-04-12 01:15:53

CSS精靈與動態漿紗

回答

相關問題