Question

我有一个全屏封面背景，我试图在它上面一个页脚，使背景变暗。但是我还需要在它上面放一张照片，它也会变暗。我试图使用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元素就可以解决它而不使用z-index

    <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;}

Answer 1

我只需在上面添加另一个带有负边距的div元素就可以解决它而不使用z-index

<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;}

Answer 2

尝试添加

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

Answer 3

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

你能给我们HTML标记吗？或者在jsFiddle中输入它，这样我们就可以看到问题所在。

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

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

页脚覆盖图像

3 个答案: