图片里面的图片

Question

我试图使用CSS将图像放在另一张放大镜图像中。我想确保无论什么，图像都会留在放大镜的圆形镜头部分内。当我使用绝对定位时，它似乎在网页大小改变时移动，即无响应。我如何响应地实现这一点我正在使用bootstrap。

我正在使用的放大镜类型如下所示：

中心现在是透明的。我还想定位图像，以便将手固定到页面底部，以便从网页上获得完整图像的效果。下面是我的一些代码，img-circle标签是一个创建圆形图像的bootstrap类，除此之外，我知道绝对定位不在正确的轨道上，因为它取决于窗口大小，这里是＃s; s自请求以来的代码片段。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试编辑图片，在glas里面设置一个透明层，外面是白色。玻璃内部的图片必须是比玻璃图片更低的z指数。请记住，只有设置了一个位置（相对/绝对...）

，z-index才有效