Verschmelzen Sie zwei Bilder zu einem und Überlauf mit Javascript versteckt

Question

Ich habe zwei Bilder in verschiedenen Divs. So für jetzt:

Ich wollte wissen, ob das oberste Bild im Hintergrundbild zusammengeführt werden kann, wenn es aus der Position des Hintergrundbildes herausgeht. Es sollte nur im Bereich des Hintergrundbildes angezeigt werden. und wenn es ausgeht oder wenn es außerhalb seiner Grenze ist, sollte es wie ein Überlauf versteckt sein.

Answer 1

Platzieren Sie das "Schiff" PNG als Kind des Grenzcontainers - setzen Sie den Grenzcontainer auf Überlauf: Versteckt und bewegen Sie das Schiff nach Bedarf im Grenzcontainer. Jedes Mal, wenn sich das "Schiff" -Png über den Rand des Begrenzungscontainers bewegt, wird es automatisch für Sie zugeschnitten.

Technisch gesehen brauchen Sie das Kind-Div nicht, Sie können das Bild einfach in das Eltern-Div setzen - aber wenn Sie das Bild in ein Child-Div setzen, erhalten Sie mehr Kontrolle über das Bild.

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