使用不含html的css精靈

我爲多個圖像創建了一個css精靈圖像。精靈的css是：使用不含html的css精靈

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

現在我想將這個精靈的第一個圖像分配給li元素。此裏的url屬性爲：

li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)

如何從精靈帶來的第一圖像和分配給li元素目前的第一印象是使用背景分配。我見過一個建議使用的例子：

<div class="sprites" id="image_5306605314403955_gif"></div>

但我想看看是否可以避免添加HTML，並使用CSS僅用於該目的。我的網頁上Li元素看起來像：

<li><a href="http://www.xyz.com">ABC</a></li>

來源

2012-11-03 Sandeep

你有沒有考慮過使用LESS或SASS？這不是你尋找的100％，因爲它需要你首先編譯樣式表，但是使用mixins它會達到類似的效果。 http://lesscss.org/#-mixins – sam

你有可能發佈我們可以使用的JS Fiddle演示嗎？這應該不難，但如果我們能夠訪問您的工作，那麼協助會更容易。 –

我不知道如果這是你在找什麼或沒有，但下面的代碼應該這樣做：

HTML：

<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li> 
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>

CSS：

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;} 
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;} 
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;} 
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;} 
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;} 
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;} 
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

如果你正在尋找的是不使用class或id，那麼我認爲這是不可能的，因爲你的CSS需要一個標識符來區分你的項目（這是繼承自同一類<li>）

來源

2012-11-04 11:26:24 MuhammadBassio

使用不含html的css精靈

回答

相關問題