Html Can'；我不能让CSS精灵工作..我做错了什么？_Html_Css_Sprite_Css Sprites

Html Can'；我不能让CSS精灵工作..我做错了什么？

html css

Html Can'；我不能让CSS精灵工作..我做错了什么？,html,css,sprite,css-sprites,Html,Css,Sprite,Css Sprites,我正在为我正在处理的网页创建精灵，但它似乎不起作用，我也不知道为什么……我想这是显而易见的，但是因此，我选取了3幅图像，压缩，生成了PNG文件（我检查了结果，结果似乎很好），然后我得到了以下css类： .sprite-welcom1 { background-position: 0 -30px; } .sprite-welcom3 { background-position: 0 -109px; } .sprite-3 { background-position: 0 -188px; }

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

因此，我选取了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>


.sprite-welcom1{背景位置：0-30px；}
.sprite-welcom3{背景位置：0-109px；}
.sprite-3{背景位置：0-188px；}
.雪碧背景{
背景：url（csg-495a902b04181.png）不重复左上角；
}

任何提示？

您的

背景位置的sprite bg
规则，设置为背景
的组合规则的一部分（左上方的部分），比背景位置的独立设置具有更高的优先级，因为它出现在样式表的后面
首先放置.sprite bg
的规则。
定义div为空的宽度和高度。把东西放进去。就像空间（
）。
人力资源管理，不太确定您在这里想要实现什么。多重分类似乎有点混乱。我已经在下面发布了我的spritemaps方法，看看这是否符合你的需要。通常这涉及到元素的组合，最常见的是带有导航链接的无序列表，但出于这个目的，它只是div
也不要忘记背景位置的顺序。
背景位置：|上| |左|
这让我搞砸了好几次。最后，List Apart有一篇关于Sprite地图的好文章（）

.雪碧货柜部{
背景：url（csg-495a902b04181.png）左上角不重复；
宽度：20px；//宽度是必需的
高度：20px；//需要高度
}
.sprite-3{背景位置：0-188px；}
.sprite-4{背景位置：-20px-188px；}
不要使用发电机。花点时间自己从头开始做。然后，下次使用此方法时，您将知道当出现问题时要查找什么，并且您将回答自己的问题，见鬼，可能是其他人的堆栈溢出
这个生成器不会为你的样式生成任何有意义的类名，这意味着如果你以后去编辑它们，除非你已经记住了这些数字，否则你从周二开始就不会知道这两个类发生了什么。当您稍后返回样式表时，有意义的名称将为您省去麻烦
打开Photoshop、GIMP或几乎任何现代图像编辑软件。确保程序已打开“标尺”选项，并以这种方式测量元素的背景图像坐标。在缺少标尺的情况下——这可能是一种罕见的情况，您可以使用Firefox扩展名和在选项卡中打开的.png来胡乱操作。
正如其他人所提到的，您的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位于样式表中main.sprite bg的下方。
由于某些原因，Firefox 3有时需要CSS选择器中的两个类来实现sprite映射。我的直觉是，当精灵贴图加载时，特定性规则会导致问题。通过添加附加类，它可以正常工作
/* Bad  */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }

最好使用parentClass“名称空间”CSS，以避免在其他地方意外地设置DOM标记的样式。下面是对上面everyones想法的一些额外增强
<!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>


.雪碧货柜部{
背景：透明url（//www.yourDomain.com/csg-495a902b04181.png）无重复滚动0；
宽度：200px；/*宽度是必需的*/
高度：20px；/*高度是必需的*/
}
.sprite容器.sprite-3{背景位置：0-188px；}
.sprite容器.sprite-4{背景位置：-20px-188px；}

这段代码适用于：IE7、Firefox3、GoogleChrome1、Opera9和Safari3
提示：在URL中避免使用http://将允许从http://和https://连接提供sprite映射
（向右滚动查看“无重复滚动0；
”
您必须为div元素声明高度和宽度。就是这样。我会考虑额外的div，然后多分类…多重分类对于消除重复非常有用。道格说得对。通过使用浏览器的开发人员工具，您可以发现这些类型的问题。在Windows上，Firefox、IE和Chrome都使用F12作为热键来启动开发工具。
<!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>