0

我一直在使用纯 css 处理翻转图像，我知道有两种解决方案可以达到预期的效果。我想知道这些方法是否有任何我不知道的好处，以及是否有首选方法或者只是一种偏好（我只是想在完成一个巨大的项目之前确保没有任何意外）

第一种方法

我遇到的第一种方法是将多个图像保存为一个图像。然后将图像设置为分隔线的背景（小于整个图像）然后:hover将背景位置设置为负值并出现其他图像

我想到的一些缺点和优点是：

优点

  • 您不需要手动预加载图像（通过将代码放在 css 文件的末尾）

  • 组织图像文件可能更容易，因为它们可能会更少

缺点

  • 很难知道图像到底移动了多少，特别是如果您有单独的团队设计图形

第二种方法

我遇到的第二种方法是设置分隔线的图像背景，然后更改背景网址:hover

我能想到的一些缺点和优点：

优点

  • 开发时间可能更少

  • 可以更轻松地交换翻转图像并且不需要指定分隔线的大小

缺点

  • 需要在css文件末尾预加载图片

  • 如果你有很多文件，你的图像文件夹可能会更乱

我有什么优点或缺点吗？一种方法通常优于另一种方法，为什么？或者是个人选择，使用任何一个都没有问题？

更新： 这是使用纯 css 的第二种方法的简单预加载的链接。我认为有一种更简单的方法（只是放置链接），但我找不到它。这仍然是非常基本的。

更新（2）： 我了解到精灵有额外的

  • 通过减少 http 请求的数量使网站更快的好处。

  • 并且翻转的好处是尽可能快而没有闪烁

  • 还有一个错误是使网站的可访问性降低，并且会限制 HTML 中 title 和 alt 属性的潜在好处。（如果不正确地用于所有图像，而不仅仅是装饰和按钮）

4

2 回答 2

1

CSS sprites（第一种方法）通常受到青睐，因为预加载对于保持高质量的用户体验不是必需的。

Wex 发布的 ALA 链接很好地介绍了精灵的好处，Smashing Magazine 最近发表了一篇文章，解决了您在使用带有许多图像的精灵时对背景位置的担忧

http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

于 2012-06-22T16:17:10.973 回答
0

第一种方法比第二种方法好得多。您不必总是将每张图像捆绑成一张巨大的图像——这通常会导致添加新图像变得困难——但将每张图像及其悬停状态放在同一张图像中确实有意义，这样你就不会看到悬停时闪烁，因此您不必依赖某些预加载脚本。

这是一篇很好的文章，讨论了使用 CSS sprites 的好处：http ://www.alistapart.com/articles/sprites

于 2012-06-22T16:14:01.573 回答