Question

在重叠两张图片时，我得到了更多的思考边框。该页面主要包含图像和静态放大镜。当使用javascript悬停此图像时，原始图像的一部分显示在放大镜中。

放大镜是一个中间有透明孔的PNG：

问题在于我在放大镜的黑线周围获得了额外的透明边框。通过这个薄边框，原始图像闪耀。作为演示，我调整放大镜图像的大小，每边20px，并在其周围添加黑色边框。它显示透明线不会出现在整个图像周围，而是出现在其中。

代码如下：

HTML：

<div id="left-image-block">
  <div id="magnifier_wrap">
    <div class="fullsize" style="display: inline; left: 0px; top: 0px;">
      <img src="/path/to/image.jpg" width="250" style="display: inline;" />
    </div>
    <div class="magnifier" style="border: 1px solid black;">
      <img src="/path/to/magnifier.png" />
    </div>
  </div>
</div>

CSS：

#magnifier_wrap { position: relative; width: 250px; height: 292px; overflow: hidden; z-index: 100; }
#magnifier_wrap .magnifier { position: absolute; left: 0; top: 0; }
#magnifier_wrap .fullsize { display: none; position: absolute; }

有什么想法吗？

Answer 1

试试这个.fullsize＆gt; img {border：none;}

CSS：重叠图像 - 显示额外的透明线

1 个答案: