css背景图片剪辑

Question

我在 php 中设置我的图像 src 并在 css 中控制样式。我有一个图像精灵，但无论我做什么，图像似乎都没有剪辑到我想要的区域。尽管我的背景尺寸设置为 24 x 24 像素，但我只是让整个图像出现。

请注意，img src 必须保留在 HTML 中，而不是移动到 css 中的 bg-image :)

在这里可以看到一个 jsfiddle jsfiddle.net/s6UnV

有什么想法吗？

#swap li img {
    background-position: 0 0px;
    background-size: 24px 24px;
    display: block;
    text-indent: -10000px;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
}

#swap li img:hover {
   background-position: 0 -24px;
}

Answer 1

您不应该将标签 img 用于精灵，您应该使用带有背景图像的 div 来添加精灵效果。

我在这里更新了你的 jsFiddle Updated jsFiddle

我做的是以下

将 Html 更改为

<ul id="swap">
  <li>
    <a href="www.google.com" target="_blank">
       <div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
      </div>
    </a>
  </li>
</ul>

并将 fb-sprite 类样式添加到 css 中

.fb-sprite{
    width:24px;
    height:24px;
    background-position: 0 0px;
    background-size: 24px 48px;
    display: block;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
    }

.fb-sprite:hover{
   background-position: 0 -24px;
    }

希望对你有帮助

ps：你也可以在这个上使用不透明效果，这样 facebook 标志就不会消失 出乎意料，只是一个建议。

干杯。

编辑：现在您可以通过编程方式更改 img 的 url，并且样式可以正常工作。还更新了 jsFiddle