css - 两个 Sprite 在同一位置 : how to make this happen?

Question

我有一个站点，主页上有两个新闻条目。它们都具有相同的图像，因此人们可以单击以阅读更多内容。所以所有标准的东西。现在，我有一个问题。如前所述，这两个图像是同一个 Sprite ，并且因为它们站在不同的文章下面而被分开，这也是合乎逻辑的。现在，我想在两个图像上创建相同的效果。如果两者都悬停，则它们必须更改为不同的 Sprite ，但现在不会发生这种情况。在一个 sprite 上，它的位置很好(因此看起来颜色发生了变化，技术人员无法理解它是图像)，但在另一个 sprite 上，悬停的 sprite 将自己定位在阅读更多按钮上方。 .

我怎样才能使这两个均匀，以便它们正确定位，而不是在阅读更多图像的上方或下方？

CSS:

.home article {
    background: url("images/readmore.png") no-repeat scroll left 250px transparent;
    float: left;
    padding: 15px 15px 45px;
    width: 300px;
}

.home article .readmore:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
}

HTML:

<article>
    <div class="entry-content">
    <a rel="bookmark" title="..." href="....">
    <p>......</p>
    <span class="readmore" title="read">read further</span>
    </a>
    </div>
</article>

PS:如果我这样做:

.home article:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
background-position: 340px 250px;
}

然后它会正确定位，但如果我悬停，它看起来就像被点击了一样。它会向左和向下，就像点击一个按钮...

Answer 1

您必须了解 CSS sprites 方法的基础知识。

你应该按照这个例子

http://www.24development.cz/examples/css-sprites/sprite.html

请查看来源并根据您的图像数据移动图像 Sprite 位置。

这还可以帮助您避免预加载所有图像的问题。

让我知道这是否适合您。