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

.testより大きいz-index 値を宣言します.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 に答える
0

2 つの DIV を使用します。1 つは左側用、もう 1 つは右側用です。それらの間の穴の幅は 50% 未満である必要があります。

于 2013-10-07T10:46:28.383 に答える