2

我有一个全屏封面背景，我试图在它上面加一个页脚，使背景变暗。但是我还需要在它上面放一张图片，它也会变暗。我尝试使用 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;}
4

3 回答 3

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;}
于 2013-07-09T21:50:50.167 回答
0

尝试添加

#footer { position: relative; z-index: 9999; }
于 2013-07-08T23:39:10.733 回答
0

这张照片到底要去哪里？它进入什么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-09T00:00:48.967 回答