我想使用精灵作为我想在网站上显示的一组图标。当使用下面的代码时,只有子画面不会出现,但是我使用的生成器声明这是显示子画面图像的正确css格式。
<html>
<style>
#sprite{
background: url(sprites.png) no-repeat top left;
}
.sprite-clock{ background-position: 0 0; width: 40px; height: 40px; display: block; }
.sprite-paintcan{ background-position: 0 -90px; width: 40px; height: 40px; display: block; }
.sprite-swatches{ background-position: 0 -180px; width: 40px; height: 40px; display: block; }
.sprite-trophy{ background-position: 0 -270px; width: 40px; height: 40px; display: block; }
</style>
<body>
<div id="sprite">
<div class="sprite-clock"><h3>Management</h3><p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p></div>
<div class="sprite-paintcan">
<h3>Professional</h3>
<p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
</div>
<div class="sprite-swatches">
<h3>Creativity</h3>
<p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
</div>
<div class="sprite-trophy">
<h3>Innovation</h3>
<p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
</div>
</div><!-- sprite-->
</body>
</html>
