本质上,我想要实现的是 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 也需要可点击,任何建议将不胜感激!