Question

我在php中设置我的图像src并控制css中的样式。我有一个图像精灵，但无论我做什么，图像似乎没有剪切到我想要的区域。我只是让整个图像显得有点我的背景大小被设置为24乘24px。

请注意，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

css背景图像剪辑

1 个答案: