0

本质上，我想要实现的是 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;"
}

视觉上这就是我所追求的，但.testdiv 也需要可点击，任何建议将不胜感激！

4

4 回答 4

0

我最终找到了解决这个问题的方法，它可能不是最好的，但它可以按照我的意愿工作：
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;
}

如您所见，.testdiv 的红色始终保持一致的宽度，并且仍然可以点击，这正是我想要的。

于 2013-10-07T22:50:54.303 回答
0

使用两个 DIV。一个用于左侧，一个用于右侧。它们之间的孔需要具有 < 50% 的宽度。

于 2013-10-07T10:46:28.383 回答
0

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

演示

你最后还有额外"的.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;
}
于 2013-10-07T10:51:23.347 回答
0

你可以给 .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;
}
于 2013-10-07T10:51:25.843 回答