html - 艺术品内部图像

Question

我正在尝试使用 CSS 将一张图片放在另一张放大镜图片的内部。我想确保图像无论如何都留在放大镜的圆形透镜部分内。当我使用绝对定位时，它似乎会在网页大小发生变化时四处移动，即无响应。我如何响应地实现这一点我正在使用 Bootstrap 。

我使用的放大镜类型如下所示:

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

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

你可以尝试编辑图片，在玻璃内部设置透明层，在外部设置白色。玻璃内的图片的 z-index 必须低于玻璃内的图片。请记住，z-index 仅在您设置了位置(相对/绝对...)时才有效