页脚覆盖图像

我有一个全屏封面背景，我试图让它在背景上变暗。不过，我也需要在它的顶部放置一张照片，让它变暗。我试图用透明度来使用z-index和切片图片，但它只是蓝色，并没有奏效。页脚覆盖图像

#footer { 
height: 100px; 
opacity: 0.4; 
background-color: #000000; 
} 
html { 
    background: url(background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
}

任何帮助非常感谢。

编辑：

我能够通过所有

<div id="footer"> 
    </div> 
    <div id="footer-main"> 
    <img src="uqu-logo.png"> 
    <p>Got question? Check our <a href="#">FAQ</a></p> 
    </div>

而CSS与阴性切缘添加上述另一div元素，而无需使用的z-index的根本解决它

#footer { 
    height: 100px; 
    opacity: 0.4; 
    background-color: #000000; 
    background-image: url('footer-bkg.png');} 
#footer-main { 
    left: 50%; 
    margin-left: -567px; 
    margin-top: -82px; 
    position: absolute; 
color: white;}

来源

2013-07-08 Juraj Beňák

因此，与阴性切缘添加上述另一div元素，而无需使用的z-index的根本解决这个问题你在主背景之上有一张你想要的图片，那么你的页脚将位于顶部？所以按照从最低到最高的元素顺序，这将是HTML背景，图像，然后在所有这一切的页脚？ –

尝试添加

#footer { position: relative; z-index: 9999; }

来源

2013-07-08 23:39:10 bob

谢谢你的回答@lawnlanders –

这张照片到底在哪里？它会进入什么div？因为现在如果我理解正确，你只需要一个位于背景上方的图层，这个图层会减少不透明度。 [jsFiddle]它在技术上已经在做。

你能给我们HTML标记吗？或者将它输入到jsFiddle中，以便我们可以看到问题出在哪里。

此外，如果Z索引不起作用，请确保您将z索引分配给每个元素，而不仅仅是#footer。

#footer { 
    height: 100px; 
    opacity: 0.4; 
    background-color: #000000; 
    z-index: 999; 
} 
#img_div { 
    z-index: 1; 
}

来源

2013-07-09 00:00:48

谢谢@黑鸟。我实际上是通过添加一个带有负边距的div来解决它 - 我将在问题本身中发布详细信息。谢谢 –

我能够通过所有

<div id="footer"> 
</div> 
<div id="footer-main"> 
<img src="uqu-logo.png"> 
<p>Got question? Check our <a href="#">FAQ</a></p> 
</div>

而CSS

#footer { 
    height: 100px; 
    opacity: 0.4; 
    background-color: #000000; 
    background-image: url('footer-bkg.png');} 
#footer-main { 
    left: 50%; 
    margin-left: -567px; 
    margin-top: -82px; 
    position: absolute; 
color: white;}

来源

2013-07-09 21:50:50

页脚覆盖图像

回答

相关问题