我正在开发一个使用对角对齐的图像的网站。图片相当简单，里面有一些文字，所以我可以使用图片或 CSS3 transform: rotate 和 border-radius 属性来实现效果，授予所有专有扩展。
但是，我想知道使用其中一种是否有显着优势。我在想也许纯 CSS 的替代方案会加载得更快，但缺点是为每个图像使用更多代码。虽然使用图像我仍然需要为每个元素做很多定位。此外，第一种情况下的 CSS 不会使用特定于浏览器的扩展进行验证，如果我仍然确保网站在大多数浏览器中正确显示，这有多重要？
是否有使用这些选项之一的通用方法？你会推荐什么？
【问题讨论】：
标签： css rotation css-transforms
使用 CSS3 与图像相比，最好的答案是您需要支持 Internet Explorer（或其他较旧的或不支持 CSS3 的浏览器）：如果您的大部分用户群用 IE 浏览，那么你应该使用图像。
如果您只对后来更符合标准的浏览器感兴趣（可能包括 IE9，但我还没有使用它的经验），那么 CSS 3 可能是更好的选择，因为它可能涉及更大的CSS 文件，但它确实允许您在将来更轻松地切换布局，而无需为新设计创建/重新创建一组新图像。
当然，您可以将这两种方法结合起来：为兼容的浏览器使用 CSS 3，但包含一个特定于 IE 的样式表，使用 conditional comments，以提供图像作为背景图像，以构建设计.当然，这可能需要大量工作。
【讨论】：
老实说，我会为此推荐一张图片。 CSS3 很酷，但不支持它的浏览器可能会破坏您的布局。此外（可能更重要的是），文本确实需要适当的抗锯齿才能在旋转或缩放时可读，并且您可以通过图像更好地控制它。
【讨论】：
我认为您应该在这里考虑两件事：
图像是移动设备上的杀手。因此，如果您的目标受众是使用移动设备的用户或希望拥有大量移动设备受众，您可能需要重新考虑使用大量图片（并让您的用户支付大量带宽费用）。
您图片中的文字（如果您使用图片）将无法被搜索引擎搜索，并且对于那些有可访问性问题的人将无法访问，除非您擅长填写alt 标签。 ;-)
【讨论】：