2

我将首先提供 CSS 和 HTML 源代码。

jsFiddle

活生生的例子在这里

问题是，h2除非我z-index: -1;在images. 但是，它使文本出现，然后图像丢失了，我看着body background.

z-index除了顶部的固定导航栏外，没有什么感人的东西。

这可能是什么原因，你能看看吗？

附言。写z-index: 2;在H2标签上也不起作用。

4

2 回答 2

5

如果你想要z-index:2作品<h2>，你应该添加position:relative;orposition:absolute;或position:fixed。

你可以看到z-index

于 2013-02-03T08:32:45.350 回答
0

我改变你的 HTML 和 CSS

HTML 中的更改：将img移动到标签中

 <div class="spotlight-area">
    <div class="spotlight">

            <div class="spotlight-item width-2 height-2">
                <a href="#" class="spotlight-info">
                    <h2 class="large">
                        Random text
                    </h2>
                    <img src="http://www.sobafire.com/__v2/themes/default/images/news/spotlight-big.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                </a>

                <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

    </div>
</div>

CSS：

在 CSS 上更改：删除位置：绝对；从img并将其添加到.spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2从.spotlight-area .spotlight-info { 中删除填充并将边距添加到.spotlight-area .spotlight .spotlight-item：悬停具有相似值的 .spotlight-info h2

.spotlight-area {
width: 790px;
margin: 0px auto;
padding: 0px;
}
.spotlight-area img, .spotlight-area embed {
max-width: 100%;
height: auto;
min-height: 50px;
}

.spotlight-area .spotlight {
display: block;
border-top: 1px solid #3b3b3b;
border-left: 1px solid #3b3b3b;
float: left;
margin-bottom: 4px;
}

.spotlight-area .spotlight .width-1 { width: 262px }
.spotlight-area .spotlight .width-2 { width: 525px }
.spotlight-area .spotlight .height-1 { height: 174px }
.spotlight-area .spotlight .height-2 { height: 349px }
.spotlight-area .spotlight .spotlight-item {
float: left;
position: relative;
border-bottom: 1px solid #3b3b3b;
border-right: 1px solid #3b3b3b;
overflow: hidden;
 }

 .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 {
color: #ffc203;
 }
 .spotlight-area .spotlight .spotlight-item img {
width: 100%;
height: 100%;

top: 0;
left: 0;
margin: 0;
border: 0;
    z-index: -1; /* tricky part */
}

.spotlight-area .spotlight-info {
display: block;
height: 100%;
min-height: 50px;
}

.spotlight-area .spotlight-info a {
display: block;
height: 100%;
min-height: 50px;
padding: 20px;
}

.spotlight-area .spotlight .spotlight-item .spotlight-info h2 {
display: inline-block;
max-width: 480px;
font-size: 30px;
line-height: 32px;
color: #f0f0f0;
    position: absolute;
    margin:20px;
}

在我的测试这个改变工作

于 2013-02-03T08:36:41.463 回答