Question

我有一个网站，主页上有两个新闻。它们都具有相同的图像，因此人们可以点击阅读更多内容。所有标准的东西。现在，我有一个问题。如上所述，这两个图像是相同的精灵，并且当它们站在不同的文章下面时是分开的，这也是合乎逻辑的。现在，我想在两个图像上创建相同的效果。如果两者都悬停，他们必须改为不同的精灵，但现在不会发生这种情况。在一个精灵上，它的位置很好（所以它看起来像颜色变化，技术人员无法理解它是一个图像），但在另一个精灵上，悬停的精灵位于读取更多按钮之上。

如何才能使这两者均匀，以便正确定位，而不是在阅读更多图像的上方或下方？

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

请根据图像数据查看源并移动图像精灵位置。

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

请告诉我这是否适合您。

Answer 2

从我所看到的，这就是你所需要的。使用一个较小的32x32图像（或任何尺寸）并将其放在右下角。

article a {
    display: block;
    background: grey url('small.png') bottom right no-repeat;
}

article a:hover {
    background: red url('small-hover.png') bottom right no-repeat;
}

同一位置的两个精灵：如何实现这一目标？

2 个答案: