html/css：在div中创建洞

Question

基本上我想要实现的是在div中间的一个洞。背后有一个100％宽度的div，最终将成为一个滚动条，在顶部将再次是一个100％宽度的div，但在中间有一个洞来展示下面的内容。目前我已经使用透明PNG背景图像实现了这一点，但后面的.test div需要可点击，所以我试图找到更好的解决方案。
的jsfiddle演示：http://jsfiddle.net/neal_fletcher/vmTHL/1/
HTML：

<div class="test"></div> 
<div class="background-image"></div> 

CSS：

.test { 
    position: absolute; 
    width: 100%; height: 240px; 
    background-color: red; 
    top: 0; left: 0; 
    z-index: 1; 
    cursor: pointer; 
} 

.background-image { 
    position: absolute; 
    width: 100%; height: 240px; 
    top: 0; left: 0; 
    z-index: 2; 
    background-image:url('http://oi42.tinypic.com/2ziwodd.jpg'); 
    background-repeat:no-repeat; background-position:center;" 
} 

视觉上这是我后，但.test DIV需要可点击过，任何建议将不胜不胜感激！

Answer 1

我终于想出了一个解决这个问题，它可能不是最好的，但它的作品，因为我想它：
的jsfiddle演示：http://jsfiddle.net/neal_fletcher/vmTHL/7/

HTML ：

<div class="test"></div> 
<div class="background-image"> 
    <div class="bg-left"></div> 
    <div class="bg-right"></div> 
</div> 

CSS：

body { 
    overflow-x:hidden; 
} 
.test { 
    position: absolute; 
    width: 100%; 
    height: 240px; 
    background-color: red; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    cursor: pointer; 
} 
.background-image { 
    position: absolute; 
    width: 200px; 
    height: 0px; 
    top: 240px; 
    left: 50%; 
    margin-left: -100px; 
    z-index: 2; 
    background-color: orange; 
} 
.bg-left { 
    position: absolute; 
    left: 0; 
    height: 240px; 
    padding-left: 100%; 
    margin-left: -100%; 
    margin-top: -240px; 
    background-color: blue; 
} 
.bg-right { 
    position: absolute; 
    right: 0; 
    height: 240px; 
    padding-right: 100%; 
    margin-right: -100%; 
    margin-top: -240px; 
    background-color: blue; 
} 

正如您所看到的，.test div的红色始终保持一致的宽度，并且仍然是可点击的，就像我想要的一样。

Answer 2

使用两个DIV。一个用于左侧，另一个用于右侧。他们需要有一个宽度为< 50％的孔洞。

Answer 3

申报.test高于.background-image

demo

另外你在最后的.background-image有额外"的z-index的值。删除。

还是你想要this demo？

.test { 
    position: absolute; 
    width: 20%; height: 240px; 
    background-color: red; 
    top: 0; left: 0; 
    z-index: 3; 
    cursor: pointer; 
    margin-left: 40%; 

} 

.background-image { 
    position: absolute; 
    width: 100%; height: 240px; 
    top: 0; left: 0; 
    z-index: 2; 
    background-image:url('http://oi42.tinypic.com/2ziwodd.jpg'); 
    background-repeat:no-repeat; background-position:center; 
} 

Answer 4

您可以给.test更多的z-index，使它在最上面。并且通过使用左边的&来调整其位置，因为位置是绝对的。

试试这个：

.test { 
    position: absolute; 
    width: auto; height: 240px; 
    background-color: red; 
    top: 0; left: 0; 
    z-index: 4; 
    cursor: pointer; 
    left:30%; 
    right:30%; 
} 

.background-image { 
    position: absolute; 
    width: 100%; height: 240px; 
    top: 0; left: 0; 
    z-index: 3; 
    background:blue; 
}