0

我知道必须有办法做到这一点。这是我的问题。我动态填充了位于容器 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-shots 排列整齐，然后让 .dribbble-shots-overlay 分别应用 png。该代码适用于一个实例，但是当它成倍增加时，它会中断。

4

2 回答 2

0

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

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

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

http://jsfiddle.net/jt8bh/

于 2013-01-10T08:44:05.123 回答
0

您可以使用覆盖图像作为背景，并在 :hover 上将内嵌图像的不透明度降低到 0。内联图像将保留其位置，并且不会破坏布局，但覆盖（实际上是底层）图像将是可见的。

于 2013-01-10T16:34:33.213 回答