将透明div层放在另一个高度为100％的div层上方（带有粘性页脚！）？

Question

HTML：

<div id="mainWrapper">
    <div id="headerContainer">Header</div>
        <div class="contentPage">
            <div id="content">
                      <p>Content Page</p>
                      <p>Content Page</p>
             </div>
        </div>
    <div id="footerContainer">Footer</div>
</div>

CSS：

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#mainWrapper {
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  width: 100%;
  background: red;
}

#headerContainer {
  background: none repeat scroll 0 0 #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {
  background: url("http://www.sammt.net/Baum.jpg") repeat-y scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
  padding-bottom: 120px;
  width: 100%;
}

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
}

#footerContainer {
  background-color: #4ED0AA;
  bottom: 0;
  height: 120px;
  position: absolute;
  width: 100%;
}

结果：

应该怎么做： 具有背景图像的图层以及具有蓝色透明背景的图层应该直到页脚开始。问题是我认为粘性页脚......

看起来像这样：

Answer 1

页面的

Here is a demo只有两个段落，another demo有足够的内容可供滚动。

我做了一些布局的重新排列，所以现在看起来像这样：

<div id="transparent-bg"></div>

<div id="mainWrapper">
    <div id="headerContainer">Header</div>

    <div class="contentPage">

        <div id="content">
            <p>Content Page</p>
            <p>Content Page</p>
        </div>
    </div>
</div>
<div id="footerContainer">
    Footer
</div>

基本上，背景图片和透明色在单独的div中呈现，因为它引起了一些表现性问题，footer已成为mainWrapper之后的兄弟姐妹。

CSS代码如下：

html {
    height:100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#transparent-bg {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background: url("http://www.sammt.net/Baum.jpg") no-repeat;
  background-size:cover;
  z-index:-1;
}

#transparent-bg:after {
  background:#6288A1;
  opacity:.8;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:'';
}

#mainWrapper {
  margin: 0 auto -120px;
  width: 100%;
  min-height:100%;
  height: auto !important;
}

#headerContainer {
  background: #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {  
  width: 100%;
  margin: 0 auto -120px;
}

#content {
  padding: 20px 20% 120px;
  box-sizing: border-box;
}

#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
}

我希望这能解决你的问题！

Answer 2

// text write your css code 

#mainWrapper {
  background: none repeat scroll 0 0 #FF0000;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  }
#headerContainer {
   background: none repeat scroll 0 0 #4ED0AA;
   width: 100%;
 }
 .contentPage {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
 }
 #content {
   background: url("http://www.sammt.net/Baum.jpg") 
   repeat-y scroll 0 0 / 100% auto rgba(0, 0,0,0);
   bottom: 0;
   left: 0;
   opacity: 0.8;
   position: absolute;
   right: 0;
  top: 0;
 }
#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
 }

Answer 3

尝试将background-size:cover放入蓝色透明背景中。

Answer 4

试试这段代码

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
  height: 100%;
}

Live Demo