在优先于图片的图片上添加图层 [英] Add a layer on top of an image that has priority over the image

问题描述

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

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

下一步是在该图像图标上添加一个图层，该图标会拦截该图片上的任何点击。我这样做的原因是因为经常一个图像将被锚定到另一个链接，所以点击它会做一些别的事情想要的东西。

我想到也许使用 z-index CSS规则，但我不完全确定这是如何工作，也不知道这是否是最好的方式。 p>

有任何建议吗？谢谢！ ：）

解决方案

将此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; 
} 
 //覆盖css属性
 .imageOverlay {
 position：absolute; 
 z-index：11px; 
 top：0px; 
 left：0px; 
 width：100％;高度：100％; 
 text-align：center; 
} 
< / style> 
  

这是您的html代码

 < div class =container> 
 
< img src =myimage.pngclass =imageHolder/> 
 
< div class =imageOverlay>加载< / div> 
 
< / div> 
  

希望它帮助...谢谢。

I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in order to save bandwidth.

I have setup the request blocking but I'm not sure how to go about the next step.

The next step would be adding a layer on top of that broken image icon which would intercept any clicks on that image. The reason I do this is because often an image will be anchored to another link so clicking on it would do something else to what is desired.

I thought of perhaps using the z-index CSS rule but I'm not entirely sure of how this works and also I'm not sure if this would be the best way to go about this.

Any suggestions? Thanks! :)

解决方案

Add this css to your 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>

This is your html code will be

<div class="container">

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

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

</div>

Hope it helps... Thanks.

这篇关于在优先于图片的图片上添加图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！