如何裁剪背景图像

我想用自定义的形式裁剪背景图像..但我已经与堆叠。如何裁剪背景图像

的目标是这样的裁剪图像： enter image description here

认为像它的每一步都是不同的html页面（页面1.HTML，页2.HTML，页面3.html）。

在页面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图像应croped。 <svg>的决定是不好的，因为我们应该把第二个图像放在第一个图像上。

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

而所有这些东西都应该与background-size: conver作出反应。

如果有人能解决这个问题？谢谢

来源

2014-09-25 user2573863

帆布将是更好的选择 – Shadow 2014-09-25 10:04:43

你能提供一个真实的例子吗？ – user2573863 2014-09-25 10:10:15

这是非常广泛的朋友，你必须在HTML5画布上研究裁剪图像 – Shadow 2014-09-25 10:12:11

@phrogz自从他第一次回答以来就值得所有学分。

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

来源

2014-09-25 18:49:20

如何裁剪背景图像

回答

相关问题