Question

我的网站上有标题，每个标题都有一张图片。

HTML

<section id="about">
    <h2>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS

h2 {
    padding-left: 24px;
    background-repeat: none;
}

#about h2 {
    background-image: url(../images/about.png);
}

#where_to_buy h2 {
    background-image: url(../images/where_to_buy.png);
}

有很多标题，这意味着很多微小的png，我想将它们组合成一个CSS精灵，以减少HTTP请求的数量。但是，我能想到的唯一方法就是在标记中引入一个新元素，我宁愿避免使用。

HTML

<section id="about">
    <h2><span class="icon"/>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2><span class="icon"/>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS

h2 .icon {
    width: 24px; height: 24px;
    display: inline-block;
    background: url(../images/heading_icons.png) no-repeat;
}

#about h2 .icon {
    background-position: 0 0;
}

#where_to_buy h2 {
    background-position: -24px 0;
}

有没有有效的方法来引入CSS精灵而不向标记引入不必要的新元素？

Answer 1

您可以使用为所有h2元素加载的CSS精灵。

h2 {
  background: url(...);
}

然后将特定部分的位置设置为仅显示about部分的精灵。例如

#about h2 {
  background-position: 0 50px;
}

Answer 2

我认为在你的情况下，最简单的解决方案是创建一个精灵，你的图标在其上垂直列出，所以你不必担心裁剪背景图像（我认为你的问题是）。然后你可以简单地使用

background-position: 0 <your icon's size * # of icon>px;
background-repeat:no-repeat;

控制您要显示的图标。

编辑：我想到了另一个解决方案，使用伪元素，例如：after，或：before。比你的标记不需要引入一个新元素，但会有一个。让我用评论的例子解释一下：

#contact:before {
    content:''; /* this is required for the generated element to show up */
    display: inline-block /* this makes it sizeable and also well positioned */
    width: 32px; /* I assume your icon size is 32 pixel, but change it */
    height: 32px;
    background-position: 32px 64px; /* this way you can position your background
                                       both horizontally and vertically */
    background-image: url('bla');
}

Answer 3

选项1：

取决于您的精灵图像和标题文字。你也许可以把它拉下来。但是没有额外的span标签，你就没有任何真正的控制权;作为一个标题的背景的一部分可能会显示在另一个标题上。我的意思是，如果在标题文本上换行到下一行，那么它可能会显示下一个标题图标。您必须在每个图标周围留出正确的间距，以使其按您希望的方式工作。基本上你必须在精灵的每个图标周围留出一定的空间，然后你就可以做@endyourif和@BartaTamás一起提出的建议。

选项2：

如果您不关心浏览器向后兼容性并且CSS3是一个选项，您可以使用background-clip属性。

CSS sprites没有引入新元素

3 个答案:

选项1：

选项2：