如何裁剪背景圖像

我想用自定義的形式裁剪背景圖像..但我已經與堆疊。如何裁剪背景圖像

的目標是這樣的裁剪圖像： 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

如何裁剪背景圖像

回答

相關問題