Javascript 如何裁剪背景图像

我正在尝试用自定义窗体裁剪背景图像。。但我已经接受了

目标是裁剪图像，如下所示：

把每一步想象成不同的html页面page-1.html、page-2.html、page-3.html

在page-1.html中，背景非常简单。必须承认的重要一点是，这些图片必须具有响应性

page-1.html

第二个示例可以通过使用元素来完成。 page-2.html

---

所有这些东西都应该有背景大小的响应：对流效应。

@phrogz应该得到他第一次回答后的所有荣誉

---

演示。对于您的解决方案，请替换组的内容。。。用你自己的。通常我会创建一个带有剪辑路径的组，以保持图像标记的整洁，但这是我自己的偏好。

画布将是更好的选择。你能提供一个真实的例子吗？这是一个非常广泛的朋友，你必须研究HTML5画布上的剪辑图像SVG会很好地工作；你只需要做这项工作。在元素上使用图层，并按文档顺序将其分层。如果您想将其作为背景，请绝对定位或定位：修复HTML内容后面的SVG，在HTML页面中使用适当的尺寸。

background-image: url(image-1.jpg) no-repeat 50% 0;
background-size: cover;

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200" viewBox="0 0 100 102" preserveAspectRatio="none" class="triangle-svg">
    <path d="M0 100 L50 0 L100 100 Z"></path>
</svg>

<style>
    .triangle-svg {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 999;
        fill: #fff;
    }
</style>

<div class='top-layout'></div>
<div class='bottom-layout'></div>

.top-layout {
   height: 500px;
}
.bottom-layout {
   height: 500px;
   position: relative;
   top: -150px;
}