CSS sprite - 图片不显示

我只是想学习如何使用精灵。我有下面的代码：CSS sprite - 图片不显示

<div class="jumbotron"> 
<h1>&nbsp;</h1> 
<h1>&nbsp;</h1> 
<h1>&nbsp;</h1> 
</div>

与下面的CSS：

.jumbotron { 
    background: url("../img/lsm1280.jpg"); 
    padding: 1em; 
    height: 12.5em; 
    width: 42em; 
    margin-top: 2em; 
    margin-bottom: 2em; 
    background-color: #eeeeee; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
}

我尝试使用CSS精灵。所以我产生使用PNG文件：http://spritegen.website-performance.org/

而且我已经改变了我的CSS代码看起来像这样：

.jumbotron { 
    background: url("../img/csg-5267d2af270ac.png") no-repeat top left; 
    padding: 1em; 

    height: 12.5em; 
    width: 42em; 
    margin-top: 2em; 
    margin-bottom: 2em; 
    background-color: #eeeeee; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
}

而且我试图改变，像这样的HTML代码：

 <head> .... stuff 
     <style> 
      .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; } " 
     </style> 
     </head> 
      <div class="jumbotron"> 
      <img class="sprite-lsm1280"/> 
      </div>

我一直在检讨在下面的文章的评论： Can't get CSS Sprite to work..what am I doing wrong?

我经历EA回答看看我做错了什么......但还没有找到它。任何建议，将不胜感激。

谢谢。

编辑1

我已经在我的浏览器的开发者工具打转转，现在我看到的图像是正装，但它是错误的！我一直在改变容器的高度/宽度属性的大小，这就是我已经确定图像正在加载......但不是正确的。

当我使用的在线工具来生成CSS精灵，它创造了一堆课给我，包括下面的一个：

.sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; }

这就是我一直在试图在图像上使用的CSS标签。但它似乎像背景位置是不正确的... 我不知道如何解决这个/测试，以证明这种情况... 谢谢。

来源

2013-10-23 dot

究竟是什么问题？ – jbenjohnson

@jbenjohnson我认为他不能让css精灵工作。 – MahanGM

首先尝试远程背景 - 重复以防万一位置错误。它可能会给你一个有关图像本身正确加载的提示。 – adrenalin

根据你的编辑，你犯了一个错误。

请勿将类.sprite-lsm1280添加到img。应用此旁边班级的股利它必须是这样

<div class="jumbotron sprite-lsm1280"> 

</div>

因为类.sprite-lsm1280移动你的背景，以一个特定的位置。

来源

2013-10-23 15:15:38 DaniP

Danko！而已！！！ – dot

CSS sprite - 图片不显示

回答

相关问题