2

我正在一个使用对角对齐的图像的网站上工作。这些图像相当简单，里面有一些文本，所以我可以使用图像或 CSS3transform: rotate和border-radius属性来实现效果，当然，还有所有专有扩展。

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

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

4

3 回答 3

1

与图像相比，使用 CSS3 的最佳答案是您需要支持 Internet Explorer（或其他较旧的或不支持 CSS3 的浏览器）：如果您的大部分用户群使用 IE 浏览，那么您应该使用图像。

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

当然，您可以将这两种方法结合起来：对兼容的浏览器使用 CSS 3，但包括一个特定于 IE 的样式表，带有条件注释，以提供图像作为背景图像，以构建设计。当然，这可能是很多工作。

于 2011-06-18T19:04:24.127 回答
1

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

于 2011-06-18T21:30:07.093 回答
1

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

  1. 图像是移动设备上的杀手。因此，如果您的目标是那些使用移动设备的用户或期望有大量移动用户，您可能需要重新考虑使用大量图像（并让您的用户支付大量带宽）。

  2. 图片中的文字（如果您使用图片）将无法被搜索引擎搜索到，并且对于那些有可访问性问题的人将无法访问，除非您擅长填写alt标签。;-)

于 2011-06-19T00:37:13.807 回答