html - Can't get CSS Sprite to work..what am I doing wrong?

Question

I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..!

So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back:

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

So here is the HTML I am testing on, and for some reason all I get is a nice blank page:

<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>

Any tips?

score 8 · Accepted Answer

不要使用发电机。花点时间从头开始自己做。然后下次使用此方法时，您将知道出现问题时要查找的内容，并且您将回答自己的问题，而且，也许其他人在 Stack Overflow 上。

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

打开 Photoshop、GIMP 或几乎所有现代图像编辑软件。确保您的程序打开了标尺选项，并以这种方式测量元素的背景图像坐标。在没有标尺的情况下 - 这可能是一种罕见的情况，您总是可以使用MeasureIt Firefox 扩展程序和在选项卡中打开的 .png。

score 4 · Accepted Answer

4

Define a width and height for <div class="sprite-bg sprite-3">.

于 2008-12-30T21:52:53.517 回答

score 3 · Accepted Answer

Your .sprite-bg rule for background-position, set as part of the composite rule for background (the top left part), has higher precedence than the stand-alone background-position setting for .sprite-3 because it appears later in the stylesheet.

Place the rule for .sprite-bg first.

score 2 · Accepted Answer

2

the div is empty. put something inside. like space ( ).

于 2008-12-30T21:54:26.167 回答

score 2 · Accepted Answer

2

您必须为元素声明一个heightand 。而已。widthdiv

于 2011-07-20T21:34:18.120 回答

score 1 · Accepted Answer

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

也不要忘记背景位置的顺序。背景位置：|顶部| |左|;

这把我搞砸了几次。最后，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>

score 0 · Accepted Answer

出于某种原因，Firefox 3 有时需要 CSS 选择器中的 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 和 Safari 3。

提示：在 URL 中避免 http:// 将允许从 http:// 和 https:// 连接提供 sprite 映射。

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

score 0 · Accepted Answer

正如其他人所提到的，你的 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 下方。

html - Can't get CSS Sprite to work..what am I doing wrong?

8 回答 8

Related

Reference