SVG header 裁剪位图 - 但具有响应能力
SVG header cropping a bitmap - but with responsiviness
我正在尝试在具有以下效果的网站中创建 header：
我的想法是在较小的屏幕中保持示例图像的中心（红色参考线指示屏幕的这一侧）。除此之外，位图会像渐变一样在侧边框上消失。
关于如何使用 HTML、SVG 和 CSS 完成此操作的任何帮助？
我最终采用了不同的方法来获得相同的结果。
我没有尝试裁剪图像，而是创建了一个白色波浪并将其用于图像。
这是小的工作代码（它在 React 中，但很容易看到 CSS/HTML 部分）：
https://codesandbox.io/s/header-cropped-vnlr0
我正在尝试在具有以下效果的网站中创建 header：
我的想法是在较小的屏幕中保持示例图像的中心（红色参考线指示屏幕的这一侧）。除此之外，位图会像渐变一样在侧边框上消失。
关于如何使用 HTML、SVG 和 CSS 完成此操作的任何帮助？
我最终采用了不同的方法来获得相同的结果。 我没有尝试裁剪图像，而是创建了一个白色波浪并将其用于图像。
这是小的工作代码（它在 React 中，但很容易看到 CSS/HTML 部分）： https://codesandbox.io/s/header-cropped-vnlr0