Question

编辑：

好的，让我简化一下，因为我显然是在骇人听闻地解释它。

以下是代码：

<html>
<head>
    <style> 
* {
    margin: 0;
}
html, body {
    height: 100%;
}
#coverPhoto {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(http://i.imgur.com/of5DkaT.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.push {
    height: 4em;
}
.footer {
    height: 4em;
    background-color: rgba(0,0,0,0.5);
}
    </style>
</head>
<body>
    <div id="coverPhoto">
        <div class="wrapper">
            <p>This is my content.</p>
            <div class="push"></div>
        </div>
    </div>
    <div class="footer">
        <p>Footer is NOT overlayed over the image</p>
    </div>
</body>

请注意，页脚位于页面底部，解决了问题，但它没有覆盖在封面照片上。我需要它出现在封面照片上。

Answer 1

我不同意在我根据提供的有限信息做出回答时被标记下来。

但是，您发布给我的链接似乎工作正常。但是有一个更清洁的解决方案，你可以考虑更少的标记。

http://jsfiddle.net/ZaSM3/3/

HTML：

<div class="page-wrap">
    <div id="content">
        <p>This is my content.</p>
    </div>
</div>

<div class="site-footer">
    <p>Footer IS overlayed over the image</p>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

html{
    background: url(http://i.imgur.com/fJYziTr.jpg) no-repeat 0 0 fixed;
    -webkit-background-size: cover;    
   -moz-background-size: cover; 
   -o-background-size: cover;
   background-size: cover;
}

body {
  width: 100%;
  height: 100%;
  font-family: Tahoma, Geneva, Arial;
  font-size: 14px;
}
#content {
  width: 1000px;
  height: 500px;
  margin: auto;
  background-color: #000;
  background-color: rgba(0,0,0,0.75);
  color: #FFF;
  text-align: justify;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
  z-index: 999;
  height: 142px;
}

Answer 2

我建议使用页脚标记（）。这是新HTML5规范的一部分，更加清晰。

HTML：

<footer><!--Insert whatever you need here--></footer>

CSS：

footer {
   position:fixed;
   bottom:0;
   opacity:0.5;
}

您可以根据需要更改不透明度。 1是100％和0.5 50％。这会给你一个想法。希望它有所帮助。

将页脚保持在页面底部并覆盖在封面照片上

2 个答案: