同一位置上的两个精灵：如何做到这一点？

我有一个网站，主页上有两个新闻项目。他们都有相同的图像，所以人们可以点击阅读更多。所以所有标准的东西。现在，我有一个问题。如上所述，这两幅图像是相同的精灵，并且与它们站在另一篇文章下面分开，这也是合乎逻辑的。现在，我想在两张图像上创建相同的效果。如果两者都徘徊，他们不得不改变为不同的精灵，但现在不会发生。在一个精灵中，它定位的很好（所以它看起来像颜色发生了变化，技术人员无法理解它是一个图像），但是在另一个精灵中，精灵的精灵位于read more按钮的上方。同一位置上的两个精灵：如何做到这一点？

我怎样才能使这两个均匀，使他们正确定位，而不是读取更多图像上方或下方？

的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; 
}

然后将正确的位置，但如果我将鼠标悬停，只是看起来像被点击。它变得左和下，就像点击一个按钮...

来源

2012-10-09 user1717526

可能我建议使用'的文章。你可以使跨度成为一个块级的元素，并从那里改变它，比使用这种不可靠的背景定位更清洁，但看起来完全一样。 –

感谢您的建议。那我怎样才能正确做到？现在看起来不错，但它并不完美。它走了一些什么左和右... – user1717526

如果你可以告诉我们一个截图或什么，我敢肯定，我们将能够提供帮助。 –

你必须了解CSS精灵方法的基础知识。

您应该遵循这个例子

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

请查看源代码，并根据您的图像数据迁移的图像精灵位置。

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

让我知道这是否适合你。

来源

2012-10-09 11:35:56

从我所看到的，这是你所需要的。使用一个小小的32x32图像（或任何大小的图像），并将其放置在右下方。在CSS悬停span`，这样，当你过不过的物品挡住跨度将改变：

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; 
}

来源

2012-10-09 11:48:10

同一位置上的两个精灵：如何做到这一点？

回答

相关问题