Question

我想将精灵用于一组我希望在网站上显示的图标。当使用下面的代码时，只有sprite没有出现，但是我使用的生成器声明这是用于显示sprite图像的正确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>

Answer 1

background属性不会继承到元素子元素。所以把它写到每个精灵类

sprite-clock{
    background: url(sprites.png) no-repeat top left;
    background-position: ....

Answer 2

尝试为所有类添加background-url

精灵没有显示

2 个答案: