Question

我知道必须有办法做到这一点。这是我的问题。我已经动态填充了容器div中的div。动态填充的div由图像传播，我将它们设置为display: inline，因此它们排序很好。我似乎无法做的是在动态div上添加叠加层。这是代码的简要说明：

<div id="container" style="width:800px">
   <div class="dynamic"><a href="#"><img src="" alt="" /></a></div>
   <div class="dynamic"><a href="#"><img src="" alt="" /></a></div>
   <div class="dynamic"><a href="#"><img src="" alt="" /></a></div>
</div>

我有动态div用背景图像设置样式，url和img通过脚本提供。我想要做的是创建一个叠加图像，我可以应用于这些div。使用position:absolute不起作用，因为它们需要在有序列表中流过页面。

以下是一些代码：http://jsfiddle.net/Juccq/

正如您所看到的，它并没有按预期工作。我希望每个.dribbble-shot排成一行很好，然后分别使用.dribbble-shots-overlay应用png。代码适用于一个实例，但当它成倍增加时，它会中断。

Answer 1

你仍然可以使用position:absolute;，你只需要将css属性pointer-events:none;添加到叠加层，但要注意这在IE或Opera中不起作用。

http://jsfiddle.net/5XqkP/（也修了一下CSS）

或者您可以尝试使用一些javascript来尝试这样的事情：

http://jsfiddle.net/jt8bh/

Answer 2

您可以将叠加图像用作背景，并将内嵌图像的不透明度降低为0 on：hover。内嵌图像将保留其位置，并且不会破坏布局，但叠加（实际上参考底图）图像将可见。

在没有位置的动态填充div上覆盖图像：绝对

2 个答案: