无法让 CSS Sprite 工作..我做错了什么？

发布于 2024-07-11 18:38:13 字数 933 浏览 5 评论 0原文

我正在使用 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>

有什么提示吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我一向站在原地 2024-07-18 18:38:13

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

该生成器不会为您的样式生成任何有意义的类名称，这意味着如果您稍后去编辑它们，您将不会知道周二的两个类发生了什么，除非您记住了这些数字。当您稍后返回样式表时，有意义的名称将让您省去麻烦。

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

回复收藏 0 原文

染火枫林 2024-07-18 18:38:13

定义

的宽度和高度。

回复收藏 0 原文

海未深 2024-07-18 18:38:13

background-position 的 .sprite-bg 规则，设置为 background 复合规则的一部分（左上角 code> 部分），比 .sprite-3 的独立 background-position 设置具有更高的优先级，因为它稍后出现在样式表中。

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

回复收藏 0 原文

清音悠歌 2024-07-18 18:38:13

div 是空的。把东西放进去。就像空间（）。

回复收藏 0 原文

醉态萌生 2024-07-18 18:38:13

您必须为 div 元素声明高度和宽度。就是这样。

回复收藏 0 原文

一抹微笑 2024-07-18 18:38:13

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

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

这已经把我搞砸了好几次了。最后，A List Apart 有一篇关于 Sprite 地图的精彩文章 (http://www.alistapart.com/文章/精灵/）

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

Hrm, not quite sure what you're trying to achieve here. The multiclassing seems a bit messy. I've posted my method of spritemaps below, see if this does what you need. Usually this involves a combination of elements, the most common being an unordered list with links for navigation, but for this purpose it's just divs.

Also don't forget the order of background-position.
background-position: |top| |left|;

That's screwed me up a couple of times. Finally, A List Apart has a great article on 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>

回复收藏 0 原文

岁吢 2024-07-18 18:38:13

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

As others have mentioned, your sprite-bg element needs to have either some content to give it a height / width, or have those properties specified in the css, thusly:

.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) */
}

As someone else mentioned, I'd move the rules for the .sprite-welcom1, .sprite-welcom3 and
.sprite-3 to beneath the main .sprite-bg in the stylesheet.

回复收藏 0 原文

乖乖兔^ω^ 2024-07-18 18:38:13

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

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

用父类“命名空间”你的 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:  is invisible when a hyperlink
           is wrapped around it.   is not... it creates an 
           underscored hyperlink. Use  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-repeatscroll 0 0;”）

For some reason, Firefox 3 sometimes wants 2 classes in the CSS Selector to make the sprite map work. My hunch is that the rules of specificity are causing problems while the sprite map loads. By adding the additional class, it works correctly.

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

It's always good to “namespace” your CSS with a parentClass, to avoid unexpectedly styling a DOM tag someplace else. Here are some additional enhancements to everyones ideas from above.

<!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:  is invisible when a hyperlink
           is wrapped around it.   is not... it creates an 
           underscored hyperlink. Use  which is a soft-hyphen.
       -->
    </div>
</body>
</html>

This code works in: IE 7, Firefox 3, Google Chrome 1, Opera 9 & Safari 3.

Tip: Avoiding http:// in the URL will allow the sprite map to be served up from both http:// and https:// connections.

(Scroll to the right to see the “no-repeat scroll 0 0;” )

回复收藏 0 原文

~没有更多了~