#117：交易的自定义页眉

在上一段视频中关于我们实际上要制作哪个页眉的奇怪困惑之后，这次我们真的要为交易页面实现自定义页眉了！这个是由Meg Hunt完成的。

与所有页眉一样，我们花了一些时间查看原始文件并弄清楚它如何在页面上最佳显示。我们尝试了一些选项，但最终决定将其放在一个受限的框中是最好的（而不是像演示页眉那样，页眉融化成内容周围的边框）。

在导出它时，我们尝试了很多不同的图形格式。有趣的是，这种特定的样式在 PNG 和 JPG 的质量和文件大小方面大致相同。我们将其输出为 2000px 宽，这在任何屏幕上看起来都应该不错。我们还达到了大约 150k，这很大，但对于这样的英雄图形来说，这是一个可以接受的目标。

我们开始整理交易的模板，包括查看交易是如何作为每个单独的自定义字段，在输出之前随机化的。我们稍后会花更多时间处理此标记和所有内容，但既然我们在这个模板中为页眉做好准备，我们不妨清理一下。

我们考虑了将自定义页眉图形放置到页面上的几种不同可能性。使用背景图片是最有意义的，因为我们正在使用语义<h1>作为标题和图像替换。使用background-size，我们查看了cover，但这会导致裁剪。我们查看了contain，但这会在外部留出空间。100%可以解决问题，但我们需要创建一个纵横比样式的盒子才能使其正常工作。但这很容易，我们只需将高度设置为 0 并使用百分比顶部填充来实现即可（填充盒子）。

这是我们完成的第七个自定义页眉，并且**它们每一个都是不同的**。网页设计，对吧？真是太奇妙了。