使用不含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精灵

回答

相关问题