將兩個圖像合併爲一個並使用javascript隱藏溢出

我在不同的div中有兩個圖像。像這樣的現在：將兩個圖像合併爲一個並使用javascript隱藏溢出

我想知道如果頂部圖像可以合併在背景圖像，如果它離開背景圖像的位置。它只能顯示在背景圖像的區域。當它熄滅或者它離開它的邊界時，它應該被隱藏起來。

2016-04-11 Hassan Ali

哈桑嗨，我們很樂意幫助你，但你的描述是你想達到什麼有點不清楚。請張貼到目前爲止，你已經嘗試過，也許嘲笑了一個可視化你想要使用任何照片編輯器或線框工具最終結果的代碼，所以我們知道最終的結果應該是什麼樣子。如果沒有這個，你的問題可能會被標記或刪除，因爲缺乏清晰度。 – Korgrue

http://creativedesignmagazine.com/wp-content/uploads/2011/05/best-photoshop-tutorials7.jpg 讓我們假設在div上我有一個png圖像太空船，如果太空船的位置是在任何背景區域的中間，它必須是可見的，但是如果它是背景的一半，則它應該顯示一半的內容，一半的內容消失在背景之外。如果它完全脫離背景，它應該必須全部消失。 –

將「船」 PNG爲界容器的孩子 - 設置邊界容器溢出：隱藏，並根據需要在邊界容器周圍移動的船。任何時候「ship」png移動到邊界容器的邊界之外時，它都會自動爲你剪切。 – Korgrue

將「ship」PNG放置爲邊界容器的子元素 - 將邊界容器設置爲overflow：hidden，並根據需要將邊界容器移動到邊界容器中。任何時候「ship」png移動到邊界容器的邊界之外時，它都會自動爲你剪切。

從技術上說，你不需要孩子div，你可以將圖像放在父div中 - 但將圖像放在孩子div中可以讓你更好地控制圖像。

HTML

<div class="parent"> 
    <div class="child"><img src="path-to-your-image/ship.png" /></div> 
</div>

CSS

.parent{ 
    width:500px; 
    height:500px; 
    overflow:hidden; 
}

來源

2016-04-12 15:44:28 Korgrue

但我想邊界像PNG邊界是不同的不正方形的形狀，它溢出整個div我只適用於圖像PNG隱藏或與JavaScript的溢出。我知道溢出：隱藏是隱藏的，但它不適用於PNG。 –

確保你的PNG有一個透明的背景（所以你沒有在它後面的白色框）。隱藏的溢出可以在任何div上工作，而不管其中的內容。它是CSS規範的基本部分。您移動到父div之外的任何PNG部分都將被剪裁。如果這沒有發生 - 那麼添加overflow：隱藏給孩子（如果瀏覽器正確執行規範，則不應該這樣做）。 – Korgrue

將兩個圖像合併爲一個並使用javascript隱藏溢出

回答

相關問題