藝術品內部的圖像

我試圖放置使用CSS的放大鏡的另一個圖像內的圖像。我想確保圖像將保留在放大鏡的圓形透鏡部分內，無論是什麼。當我使用絕對定位時，每當網頁大小發生變化時，似乎都會四處移動，即無響應。我如何做到這一點，我正在使用bootstrap。藝術品內部的圖像

類型放大鏡我與看起來像這樣的工作：

中心現在是透明的。我還想定位圖像，以便將手固定在頁面的底部，以便在網頁上顯示完整圖像的效果。下面是我的一些代碼，img-circle標籤是創建圓形圖像的引導類，除此之外，我知道絕對定位不在正確的軌道上，因爲它取決於窗口大小，儘管這裏是代碼段自請求。

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>

來源

2016-04-12 maxwell

你能告訴我們你的代碼嗎？或者甚至更好，創建一個片段或垃圾箱？ –

好的，只是一會兒 – maxwell

你可以嘗試編輯圖片，GLAS內設置一個透明層和白色之外。玻璃內的圖片必須比帶玻璃的圖片低z-索引。請記住，z-index只在你設置了一個位置（相對/絕對...）時才起作用。

來源

2016-04-12 13:53:10 Neme

藝術品內部的圖像

回答

相關問題