Image芸術作品の中

Question

私はCSSを使って虫めがねの別のイメージの中にイメージを配置しようとしています。私は画像が虫眼鏡の円形レンズの部分の中にとどまることを確かめたいです何があっても。絶対的な位置付けを使用すると、ウェブページのサイズが変化するとき、すなわち応答しないときはいつでも移動するように見える。これをどのようにして達成するのですか？私はブートストラップを使用しています。

拡大鏡のタイプは、私はこのようなルックスで働いています：

センターは現在、透明です。私はまた、Webページから完全なイメージの効果を与えるために、手がページの下部に固定されるように画像を配置したい。ここで私のコードのいくつかを以下に示します。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>

Answer 1

あなたは外GLASの内側に透明層と白を設定した画像を編集しようとすることができます。ガラス内部の画像は、ガラスの画像よりも低いzインデックスでなければなりません。あなたがポジションを設定している場合にのみz-indexが機能することを覚えておいてください（相対/絶対...）