我有一个站点,主页上有两个新闻条目。它们都具有相同的图像,因此人们可以单击以阅读更多内容。所以所有标准的东西。现在,我有一个问题。如前所述,这两个图像是同一个 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;
}
然后它会正确定位,但如果我悬停,它看起来就像被点击了一样。它会向左和向下,就像点击一个按钮...
最佳答案
您必须了解 CSS sprites 方法的基础知识。
你应该按照这个例子
http://www.24development.cz/examples/css-sprites/sprite.html
请查看来源并根据您的图像数据移动图像 Sprite 位置。
这还可以帮助您避免预加载所有图像的问题。
让我知道这是否适合您。
关于css - 两个 Sprite 在同一位置 : how to make this happen?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12798833/