0

我只是想学习如何使用精灵。我有以下代码：

<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..我做错了什么？

我正在浏览每个答案，看看我做错了什么......但还没有找到。任何建议，将不胜感激。

谢谢。

编辑 1

我一直在浏览器中使用开发人员工具，现在我看到正在加载图像，但它是错误的！我一直在更改容器的高度/宽度属性的大小，这就是我确定图像正在加载的方式......但不是正确的。

当我使用在线工具生成 css sprite 时，它​​为我创建了一堆类，包括以下一个：

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

这就是我一直试图在图像标签上使用的 css。但似乎背景位置不正确......我不确定如何修复这个/测试以证明是这种情况......谢谢。

4

1 回答 1

0

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

不要将课程.sprite-lsm1280应用于 img 。将此应用到您的 div 类旁边，它必须是这样的

<div class="jumbotron sprite-lsm1280">

</div>

因为班级.sprite-lsm1280正在将您的背景移动到特定位置。

于 2013-10-23T15:15:38.657 回答