Question

我正在使用CSS Sprite Generator为我正在处理的网页创建精灵，但它似乎不起作用，我不知道为什么......我想这是显而易见的但是...... ！

所以，我拿起3张图片，压缩，生成了PNG文件（我检查结果看起来很好），我得到了以下css类：

.sprite-welcom1 { background-position: 0 -30px; } 
.sprite-welcom3 { background-position: 0 -109px; } 
.sprite-3 { background-position: 0 -188px; }

所以这是我正在测试的HTML，由于某种原因，我得到的是一个很好的空白页：

<html>
<head>
    <style>
    .sprite-welcom1 { background-position: 0 -30px; } 
    .sprite-welcom3 { background-position: 0 -109px; } 
    .sprite-3 { background-position: 0 -188px; } 

    .sprite-bg {
       background: url(csg-495a902b04181.png) no-repeat top left;
    }
    </style>
</head>
<body>
    <div class="sprite-bg sprite-3"></div>
</body>
</html>

任何提示？

Answer 1

不要使用发电机。花点时间从头开始做。然后下次你使用这个方法时，你会知道在出现问题时要寻找什么，你会回答你自己的问题，然后就可能是其他人在Stack Overflow上了。

这个生成器没有为你的样式生成任何有意义的类名，这意味着如果你以后去编辑它们，除非你记住这些数字，否则你不会从周二开始知道两个类是什么。当你稍后返回样式表时，有意义的名字会让你头疼。

打开Photoshop，GIMP或几乎任何现代图像编辑软件。确保您的程序已打开标尺选项，并以这种方式测量元素的背景图像坐标。在没有统治者的情况下 - 这可能很少见，你可以随时使用MeasureIt Firefox扩展并在选项卡中打开.png。

Answer 2

定义<div class="sprite-bg sprite-3">的宽度和高度。

Answer 3

.sprite-bg background-position的{{1}}规则设置为background（top left部分）的复合规则的一部分，其优先级高于独立background-position 1}} .sprite-3的设置，因为它稍后出现在样式表中。

首先放置.sprite-bg的规则。

Answer 4

div是空的。把东西放进去。喜欢空间（ ）。

答案 4 :(得分：2)

您必须为 height 元素声明width和div。就是这样。

答案 5 :(得分：1)

嗯，不太确定你在这里要做什么。多分类似乎有点混乱。我在下面发布了我的spritemaps方法，看看这是否符合你的需要。通常这涉及元素的组合，最常见的是带有导航链接的无序列表，但为此目的，它只是div。

另外不要忘记背景位置的顺序。 background-position：| top | |左|;

这让我搞砸了几次。最后，A List Apart有一篇关于Sprite Maps（http://www.alistapart.com/articles/sprites/）

的精彩文章

<html>
<head>
    <style>
    .sprite-container div {
       background: url(csg-495a902b04181.png) top left no-repeat;
       width: 20px; //width is neccessary
       height: 20px; //height is neccessary
    }

    .sprite-3 { background-position: 0 -188px; } 
    .sprite-4 { background-position: -20px -188px; }

    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div>
      <div class="sprite-4"></div>
    </div>
</body>
</html>

答案 6 :(得分：0)

正如其他人所提到的，你的sprite-bg元素需要有一些内容来赋予它高度/宽度，或者在css中指定那些属性，因此：

.sprite-bg {
  background: url(csg-495a902b04181.png) no-repeat top left;
  width: 100px; /* (or whatever the width should be) */
  height: 100px; /* (or whatever the height should be) */
}

正如其他人提到的，我会移动.sprite-welcom1，.sprite-welcom3和 .sprite-3位于样式表中主.sprite-bg下面。

答案 7 :(得分：0)

出于某种原因，Firefox 3有时需要CSS Selector中的2个类来使精灵图工作。我的预感是，精灵地图加载时，特异性规则会导致问题。通过添加附加类，它可以正常工作。

/* Bad  */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }

使用parentClass“命名”CSS总是好的，以避免在其他地方意外地设置DOM标记的样式。以下是对上述每个人的一些额外改进。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    .sprite-container div {
       background: transparent url(//www.yourDomain.com/csg-495a902b04181.png) no-repeat scroll 0 0;
       width: 200px; /* width is necessary */
       height: 20px; /* height is necessary */
    }
    .sprite-container .sprite-3 { background-position: 0 -188px; } 
    .sprite-container .sprite-4 { background-position: -20px -188px; }
    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div> 
      <div class="sprite-4"></div> 
      <!-- Empty divs are fine! Unless you *really* want text on top of
           your sprite map. :o) Btw: &shy; is invisible when a hyperlink
           is wrapped around it. &nbsp is not... it creates an 
           underscored hyperlink. Use &shy; which is a soft-hyphen.
       -->
    </div>
</body>
</html>

此代码适用于：IE 7，Firefox 3，Google Chrome 1，Opera 9＆amp; Safari 3。

提示：在URL中避免使用http：//将允许从http：//和https：//连接提供精灵地图。

（向右滚动查看“no-repeat scroll 0 0;”）

Answer 5