背景图像形状

以下文章是由 Joseph Markus 撰写的客座文章。Joseph 需要为 BFI 的英国电影网站 实现一个特定的设计。作为一名真正的前端开发者，Joseph 考虑了需求，并尝试了许多不同的方法，以找到最佳的方案。他将带我们一起回顾这段旅程。我不知道你是否跟我一样，但我非常喜欢这种事情。

今年 7 月，BFI 的英国电影网站发布，广受好评。作为世界上独一无二的历史影像档案，英国电影网站邀请观众踏上一段穿越英国历史的旅程。

Ostmodern 团队为该产品设计和构建的一个关键功能是，一个引导用户探索档案的登录页面，用户可以按时间、主题和地点发现内容。该登录页面的核心部分是一个内容建议的动画模块，每个模块都描绘着档案中电影的静态图像。

以下视频展示了最终结果。

该项目的简要说明明确指出，该任务需要分成易于管理的小块，并必须考虑以下限制。

• CMS 管理的图像 – BFI 团队的内容管理人员上传具有预定义尺寸的图像。然后将该图像分配到三个容器之一：左侧、顶部或右侧。
• 响应式 – 容器不仅需要水平可调整大小，而且当容器变得更窄时，它也需要占用更少的垂直高度。
• 动画 – 图像不会立即更改，而是淡入下一个图像。
• 浏览器支持 – 应该尽可能地向后兼容，并优雅地降级。
• 语义 – 使用 HTML 和 CSS，而不是 Flash 或其他类似的东西。

我们将研究上述限制的组合。我已经花了一段时间研究该任务的最佳方法，我认为分享我的研究成果、方法以及最终结果将非常有用。

这是我们需要的布局的 Sketch 线框。

我们将介绍几种技术。最后一种是最终投入生产的版本。

1. CSS transform 在 div 上
2. CSS clip-path
3. SVG <pattern><image>
4. SVG <clipPath><polygon> + <image>

尝试 #1：CSS 变换

这是我想到的第一个方法。一个具有固定宽度/高度、相对定位和溢出隐藏的图像容器。两个矩形在里面，绝对定位它们，变换旋转 - 都是 神奇的数字。请查看我的快速 Sketch 模拟。

这里最大的问题是获得正确的旋转度数。设置每个形状的正确超大宽度和高度，以及元素在主容器边界之外的位置。所有这些都是可以实现的，但是非常无聊而且很“脏”。如果你要走这条路，也许一个很好的方法是从像上面那样导出模拟作为平坦图像，并将其设置为页面的背景图像，然后开始在 DevTools 中定位和调整元素，直到你得到正确的结果。

但是，有一个很大的问题。假设你将图像放入这些容器中（例如使用 background-image）。这些图像也会被旋转，这不是我们想要的。要解决这个问题并不难。你可以使用它们的伪元素并以相反的方向旋转它们，但相信我，这会变得非常棘手，特别是当你开始处理媒体查询时。

优点

• 舒适的技术：一些旋转和定位的 div。

缺点

• 大量的计算和测量。
• 响应式断点很难实现。

这个选项显然不可行。

尝试 #2：CSS 剪切路径

CSS clip-path 让我想到那些“我听说过，但从未使用过”的东西。由 Bennett Feely 开发的工具 Clippy 使其看起来非常容易和直观。

这可能是我最干净、最直观、也绝对是我最喜欢的选项。

优点

• 易于创建和修改。
• 简洁的代码。

缺点

• 不支持 IE，而这是该项目的要求。

令人遗憾的是，缺点使它被淘汰了。以下是如何工作的演示。

查看 CodePen 上 Joe (@jmarkevicius) 的示例 LpbzRa。

尝试 #3：SVG <pattern><image>

我不得不进行相当多的研究才能弄清楚我在做什么以及如何获得想要的结果。我从 Sketch 导出的 SVG 有一些混乱，似乎包含了很多无用信息。我不得不进行很多实验，并且发现理解 viewBox 和 preserveAspectRatio 非常关键。以下是一些资源可以帮助你理解这些概念。

• Jakob Jenkov: SVG 视区和视窗
• Sara Soueidan: 理解 SVG 坐标系和变换（第一部分） - 视区、视窗和 preserveAspectRatio
• Joni Trythall: SVG 中 preserveAspectRatio 的概述
• Giovanni DiFeterici: SVG 和 preserveAspectRatio 属性

优点

• 广泛的浏览器支持（IE 9+、Firefox 41+）。

缺点

• 在 CSS 剪切路径之后，有点令人失望。
• Firefox 在版本 <40 中存在一个 错误（可以在下面的示例或这里查看错误）。

在各种 SVG 形状中，可裁剪图像作为背景的示例。

查看 CodePen 上 Aleksey (@bonflash) 的示例 SVG 模式游乐场。

尝试 #4：SVG <clipPath><polygon> + <image>

这个选项是作为解决上次尝试中描述的 Firefox 错误的变通方法出现的。它通过普通的 SVG <image> 标签应用图像，然后使用必要的 <polygon> 创建的 clip-path 对它们进行应用。

查看 CodePen 上 Joe (@jmarkevicius) 的示例 jPgmWG。

由于它的广泛浏览器支持，这个示例最终投入了生产。

添加一些花哨的过渡，在顶部叠加更多元素，瞧 - BFI Player 上的 英国电影网站登录页面 就可以使用了。

请在评论中告诉我你的想法！

其他资源

• MDN: viewBox
• Justin McCandless: 理解 SVG viewBox 的疯狂
• CSS-Tricks: CSS 中的剪切和蒙版
• Steven Bradley: 使用 viewBox 属性移动和缩放 SVG 图形
• Tavmjong Bah: 在 HTML 中测试 SVG 视区和视窗