jquery - 隐藏在图像后面的标题和段落

Question

信息

威本伊克？ Welke herstellingen doe ik？

#navigation {
height: 810px;
width: 884px;
}

#navigation h1 {
padding-top: 10px;
padding-left: 20px;
font-size: 18px;
}

#navigation p {
padding-left: 20px;
}

#home-block, #info-block, #prices-block, #contact-block {
position: relative;
    float: left; 
    width: 440px; 
    height: 300px; 
    background: #e7e8d9;
}

#home-block, #prices-block {
border-right: 4px solid #fff;
}

#home-block, #info-block {
border-bottom: 4px solid #fff;
}

.a {
position: absolute;
    z-index: 1;
top: 0px;
left: 0px;
 }

.b {
position: absolute;
top: 0px;
left: 0px;
 }

我想用 jQuery 创建一个褪色图像。这有效，但现在我的标题和段落隐藏在图像后面。您可以在 link text 上进行测试

我希望我的标题和段落位于图片下方，就像其他 3 个部分一样。我该如何安排？ 谢谢!

Answer 1

一个快速而肮脏的解决方案是

#home-block > a {
    display: block;
    height: 200px;
}

但是如果您的图像大小发生变化，这将会中断。 (尽管看起来您不会经常更改。)