代码之家 › 专栏 › 技术社区 › user1584751

精灵不显示

sprite css-sprites css html

0

user1584751 · 技术社区 · 12 年前

我想使用精灵作为我想在网站上显示的一组图标。当使用下面的代码时,只有子画面不会出现,但是我使用的生成器声明这是显示子画面图像的正确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>

2 回复 | 直到 12 年前

1

dsuess 12 年前

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

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

2

0

javakorr 12 年前

尝试为所有这些类添加背景url