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

使用两个DIV。一个用于左侧，一个用于右侧。它们需要宽度<1。他们之间的洞是50％。

Answer 2

声明.test的z-index值高于.background-image

demo

此外，"的最后.background-image还有.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; }。删除它。

或者您想要this demo？

{{1}}

Answer 3

你可以给.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;
}

Answer 4

我最终找到了解决这个问题的方法，它可能不是最好的，但它可以按照我的意愿运作：
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的红色始终保持一致的宽度，并且仍然可以点击，就像我想要的那样。

html / css：在div中创建漏洞

4 个答案: