SVG 标头裁剪位图 - 但具有响应性

【问题标题】：SVG header cropping a bitmap - but with responsivinessSVG 标头裁剪位图 - 但具有响应性
【发布时间】：2019-12-26 00:15:16
【问题描述】：

我正在尝试在具有以下效果的网站中创建标题：

我的想法是将示例图像的中心保持在较小的屏幕中（红色指南表示此屏幕侧）。除此之外，位图会像渐变一样消失在侧边框上。

对如何使用 HTML、SVG 和 CSS 完成此任务有任何帮助吗？

【问题讨论】：

【解决方案1】：

我最终采用了不同的方法来实现相同的结果。我没有尝试裁剪图像，而是创建了一个白色波浪并在图像上使用它。

这是一个小的工作代码（它在 React 中，但很容易看到 CSS/HTML 部分）： https://codesandbox.io/s/header-cropped-vnlr0

【讨论】：