0

我有 3 个元素堆叠在一起。顶部元素是覆盖内容。第二个元素是背景边框图像。底部元素是背景。

我想要做的是把中间元素挖空，这样我就可以通过顶部元素看到底部元素，但留下中间元素的边框围绕顶部元素。

http://jsbin.com/unimux/4/edit

如您所见，中间元素阻挡了底部元素的视图。

编辑：我确实尝试过使用边框图像，但使用边框半径无法正确渲染。

Edit2：是否可以使用边框图像获得所需的效果？感谢任何可以通过边框图像使它看起来不可怕的人。

Edit3：基于 Zuul 的回答取得了一些进展：http: //jsbin.com/unimux/15/edit

4

3 回答 3

1

设置一个带有类的新元素，例如，.apple并将其放置在所有其他现有元素上，并具有与底部相同的图像：

查看您的JS Bin 示例已更改！

  div.apple {
    margin: 100px;
    width: 200px;
    height: 200px;
    background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
  }

使图像居中并通过提供正确的边距值，它可以模拟div.middle.

查看结果预览：

最终结果预览

如果元素尺寸不同，则使用 CSS位置有助于将所有内容保持在适当的位置：

这里有一个例子！

于 2012-06-15T17:30:19.867 回答
1

根据 egasimus，你不能用 CSS 真正做到这一点。

不过尝试这样的事情，用四个divs 创建“窗口”。

于 2012-06-15T17:31:37.600 回答
1

在 CSS 的当前状态下，您无法真正做到这一点。也许只是将底部元素放在中间元素的顶部，然后工作？

于 2012-06-15T17:24:24.947 回答