CSS3变换旋转vs使用图像

Question

我正在使用对角线对齐图像的网站。图像非常简单，内部有一些文本，所以我可以使用图像或CSS3 transform: rotate和border-radius属性来获得效果，并使用所有专有扩展。

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

是否有使用这些选项之一的一般方法？你会推荐什么？

Answer 1

对于支持Internet Explorer（或其他旧版或CSS3-unaware，浏览器）的需求，最好回答CSS3与图像的使用：如果您的用户群很大一部分用IE浏览，然后你应该使用图像。

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

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

Answer 2

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

Answer 3

我认为你应该考虑两件事：

1. 图片是移动设备用户的杀手锏。因此，如果您定位移动设备或预计会有大量移动受众群体，您可能需要重新考虑使用大量图片（并让您的用户支付大量带宽）。

2. 图片中的文字（如果您使用图片）将无法被搜索引擎搜索到，并且对于那些存在辅助功能问题的人来说无法访问，除非您擅长填写alt代码。 ; - ）