CSS3变换旋转与使用图像

Question

我正在使用图像对角线对齐的网站上工作。这些图像非常简单，并且里面有一些文字，所以我可以使用图像或CSS3 transform: rotate和border-radius属性（具有所有专有扩展名）授予该效果。

但是，我想知道是否有显着的优势，使用一个在另一个。我在想也许只有CSS的选择会加载速度更快，但缺点是每个图像使用更多的代码。尽管使用图片，但我仍然需要为每个元素进行很多定位。此外，第一种情况下的CSS不会使用特定于浏览器的扩展进行验证，如果我仍然确保该网站在大多数浏览器中正确显示，这一点有多重要？

是否有使用这些选项中的任何一个的一般方法？你会推荐什么？如果你的用户群很大一部分与IE浏览则：

Answer 1

使用CSS3的，与图片，最好是由你需要支持Internet Explorer（或其他老，或CSS3，不知道，浏览器）回答你应该使用图像。

如果你只对后面的，更符合标准的浏览器（可能包括IE9，但我还没有经验）感兴趣，那么CSS 3可能是更好的选择，因为它可能涉及更大的CSS文件，但它确实允许您在将来更轻松地切换布局，而无需为新设计创建/重新创建一组新图像。

当然，您可以将两种方法结合使用：将CSS 3用于兼容的浏览器，但包含特定于IE的样式表（conditional comments），以提供图像作为构建设计的背景图像。当然，这可能是很多工作，但是。

Answer 2

我会诚实地为此推荐一个图像。 CSS3很酷，但不支持它的浏览器可能会破坏你的布局。另外（可能更重要的是），文本确实需要适当的消除锯齿，以便在旋转或缩放时可读，并且可以更好地控制图像。

Answer 3

两件事情我想你应该考虑在这里：

1. 图片是为那些在移动设备上的杀手锏。因此，如果您针对那些使用移动设备的用户或希望拥有大量移动用户，则可能需要重新考虑使用大量图像（并让用户支付一吨的带宽）。

2. 文本在您的图像（如果您使用的图像）将不会被搜索引擎搜索，并不会为那些访问问题访问，除非你是善于在alt标签填充。 ;-)