Bild innerhalb von Artwork

Question

Ich versuche, ein Bild in ein anderes Bild einer Lupe mit CSS zu platzieren. Ich möchte sicherstellen, dass das Bild in der kreisförmigen Linse Teil der Lupe bleibt egal was. Wenn ich die absolute Positionierung verwende, scheint es sich immer dann zu bewegen, wenn sich die Größe der Webseite ändert, d.h. nicht mehr reagiert. Wie erreiche ich das? Ich benutze Bootstrap.

Die Art Glas I mit sieht wie folgt aus Vergrößerungs arbeite:

Das Zentrum nun transparent ist. Ich möchte auch das Bild so positionieren, dass die Hand am unteren Rand der Seite fixiert ist, um den Effekt eines vollständigen Bildes von der Webseite zu erhalten. Hier ist ein Teil meines Codes unten, das Img-Circle-Tag ist eine Bootstrap-Klasse, die ein kreisförmiges Bild erstellt. Ansonsten weiß ich, dass die absolute Positionierung nicht auf der richtigen Spur ist, da sie von der Fenstergröße abhängt. Hier ist das Code-Snippet seit gewünscht.

img-circle { 
 
    position : absolute; 
 
    bottom : 146px; 
 
    border : black solid 4px; 
 
} 
 

 
.mag-glass { 
 
    position : absolute; 
 
    bottom : 0; 
 
    right : 0; 
 
    width : 100%; 
 
    height : auto; 
 
}

 <div class = 'col-sm-4'> 
 
     <img class = "mag-glass" src = "img/mag-glass.png"> 
 
     <img class = "img-circle" ng-src = "a dynamic map image goes here /{{lat}}/lng/{{lng}}"> 
 
     </div>

Answer 1

Sie könnten versuchen, das Bild zu bearbeiten, im Innern des Glases eine transparente Schicht und außen weiß gesetzt. Das Bild im Glas muss einen niedrigeren Z-Index haben als das Bild mit dem Glas. Denken Sie daran, dass der Z-Index nur funktioniert, wenn Sie eine Position festgelegt haben (relativ/absolut ...)