使用单独的图像。

以下是几个原因：

<强>维护：如果/当你希望以你已经拥有的东西为基础的时候，那将来会更容易维护。此外（并且主观地），背景图像对于设计并不重要。如果部分背景被剪裁，它看起来不会破碎。如果徽标被扭曲，它看起来会破碎。

请记住，正在开发更新，更清晰的显示器。显示标准分辨率背景（它已经模糊，因此清晰度不是必需的），并且维护徽标的两个版本要容易得多。一个用于标准显示，一个用于HD。

语义：如果用户禁用了图片怎么办？当然，这不太可能，但 Google 怎么样？你应该有一些真实内容的正确标记。您的网站需要真实的文字内容，Google的抓取工具才能收集相关信息。使用CSS图像替换技术来构建界面。

关于高清显示屏的另一个注意事项： 通常将较大的图像提供给HD（视网膜）显示器，并使用CSS缩小它们的尺寸，有效地增加它们的每英寸点数。如果您只使用一个图像，则用户必须下载相当大的图像。您使用的带宽更多，用户体验更慢。

此外，高清显示屏上的文字看起来很糟糕。允许浏览器向用户渲染锐利的文本更有意义。

辅助功能：首先，屏幕阅读器无法确定您网站的内容。在这种情况下，这可能不太相关，但最佳做法是构建和访问网站。如果要在网站上包含一些较小的文本，某些用户可能无法阅读它。通常他们会增加字体大小，但如果你使用图像，他们就会无能为力。

我可能过度戏剧化了这个答案，但建议是善意的。

答案 1 :(得分：1)

老实说，我会尝试一些不同的方法。图像的“照片”部分是一个图像，另一个是徽标，也可能是标题另一侧的双栏（但可能没有必要。）

我会将照片部分用作div上的bg图像，并在代码中使用其余部分。

我根本不会将文字作为图像的一部分。尝试使用像Google Web Fonts这样的服务来获得一个好的字体。

该方法将为您节省大量维护时间，并有助于提高性能。

答案 2 :(得分：0)

优点：

答案 3 :(得分：0)

如果您只使用1张图像，您会发现保持布局的流畅性会更容易。你不会有填充/对齐问题，渲染问题等。实际上加载时间应该是相同的，对于多个图像来说可能有点长，因为浏览器必须渲染更多的CSS，但我想它不会很noticable。最后，它真正归结为对工作更好的东西。我非常偏向于一张干净的图像：）

答案 4 :(得分：0)

我想你必须考虑如何单独使用每个元素，以及它们将来如何改变。

您可能想要更改徽标，为其制作动画或想要在其他地方重复使用徽标。背景图像可能会改变，或在某种过渡画廊中变成多个图像。

如果它永远不会改变（不太可能），那么，是的，将它压平在单个图像中。

我个人会将其作为单独的背景图像。然后可能在另一个透明的png上有徽标和标签，并利用css sprites在整个站点中重复使用它们。这将下载徽标/标签所需的请求数量减半，并允许您分别优化每个图像，即复杂的背景照片和更简单的徽标/标签。