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; 
}