Question

我制作的Chrome扩展程序会停止所有图片请求，并允许您点击损坏的图片图标，以便加载图像而不会阻止图片。这是为了节省带宽。

我已设置阻止请求，但我不确定如何进行下一步。

下一步是在该损坏的图像图标上添加一个图层，该图标将拦截该图像上的任何点击。我这样做的原因是因为通常会将图像锚定到另一个链接，因此点击它会对所需内容做出其他操作。

我想过可能使用z-index CSS规则，但我不完全确定这是如何工作的，而且我也不确定这是否是最好的解决方法。

有什么建议吗？谢谢！：）

Answer 1

你必须做类似的事情：

使用css相对位置创建基本div
使用css绝对位置创建你的img标签，左：0px，顶部：0px，宽度：100％，高度可能为50，z-index可能为10.
用css位置创建一个顶层div：绝对，z-index高于img的值，top：0px，left：0px，width：100px，height可能是50。

代码看起来像

<div style="position:relative; width:50px;">

    <img src="image.ext" border="0" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:10px;" />

    <div style="position: absolute; z-index:11px; top:0px; left:0px; width:50px; height:50px; line-height:50px; text-align:center;"> Load </div>

</div>

Answer 2

将此css添加到您的html

<style type="text/css">
  //container div 
     .container{
      width:300px;
      position:relative; 
      }
 //image css property
  .imageHolder{
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100%; 
      height:100%; 
      z-index:10px;
      }
  //    overlay css property
  .imageOverlay{
      position: absolute; 
      z-index:11px; 
      top:0px; 
      left:0px; 
      width:100%; height:100%; 
      text-align:center;
      }
  </style>

这是你的HTML代码

<div class="container">

    <img src="myimage.png" class="imageHolder" />

    <div class="imageOverlay"> Load </div>

</div>

希望它有所帮助......谢谢。

在图像上方添加一个优先于图像的图层

2 个答案: