如何裁剪背景图像答案

【问题标题】：How to crop background images如何裁剪背景图像
【发布时间】：2014-09-25 10:01:49
【问题描述】：

我正在尝试使用自定义表单裁剪背景图像..但我已经堆叠了。

目标是像这样裁剪图像：

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

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

page-1.html

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

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

<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>

但是第三个例子呢？我不知道如何处理它。在 3 示例中，我们看到如下内容：

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

.top-layout 图像应该被裁剪。 <svg> 的决定很糟糕，因为我们应该能够将第二张图片放在第一位。

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

所有这些东西都应该以background-size: conver 效果响应。

【问题讨论】：

画布将是更好的选择
你能提供一个真实的例子吗？
很广的朋友，你得学习在HTML5画布上剪图
SVG 可以正常工作；你只需要做这项工作。在<image> 元素上使用clipping path，并按照文档顺序将它们分层。如果您想将此作为背景，请绝对定位（或position:fixed）HTML 内容后面的 SVG，并在 HTML 页面中使用适当的尺寸。

标签： javascript jquery html css svg

【解决方案1】：

@phrogz 应该得到所有功劳，因为他第一个回答。

clip-path, mask and gradient 的演示。对于您的解决方案，请将组 <g clip-path="url(#clip-bottom)" > ... </g> 的内容替换为您自己的 <image .... clip-path="url(#clip-bottom)" />。通常我会创建一个带有clip-path 的group 以保持image 标签更干净，但这是我自己的偏好。

【讨论】：