1

我在 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;
}
4

1 回答 1

3

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

我在这里更新了你的 jsFiddle更新了 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 logo就不会突然消失，只是一个建议。

干杯。

编辑：现在您可以以编程方式更改 img 的 url 并且样式将起作用。还更新了 jsFiddle

于 2013-01-15T12:10:26.510 回答