CSS：从父级撤消透明颜色

Question

我的#wrapper div中有一个图像背景，33％透明的白色＆＃34;叠加＆＃34;在#lightbackground div（background: rgba(255, 255, 255, 0.33);）中。现在我想撤销位于#footer div上的#lightbackground div中的透明白色：

结果应该是这样的：

#footer div（取决于y轴）的位置未知！它取决于#content div中显示的内容。最小高度应该一样大，#footer div位于html的底部。

我使用这个技巧来防止在页面的中间显示页脚：http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/。问题是，wrapper和lightbackground在标题之后开始并以页面结束。所以他们也在我的页脚上（如第一张图所示）。但是我希望页脚具有原始背景图像而没有任何白色叠加（见图2）。

这是我项目的简化版本：https://jsfiddle.net/mab30m0e/看看js部分的评论！

我的一个想法是将背景图像再次设置为#footer div，但它必须像#wrapper div中的那个一样放置，并且只需要背景的一部分＆＃ 39; #footer div内部应显示。

Answer 1

更新回答

根据您提供的编辑和小提琴，我认为这对Flexbox来说是一个很好的工作：

1. 将主体设置为至少具有min-height: 100vh
的视口高度
2. 使用flex: 0 0 80px
使页眉和页脚不弯曲，固定高度为80px
3. 让<main>使用flex: 1 1 auto
吸收剩余的可用空间
＆＃13;
＆＃13;
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  background: url(//placekitten.com/g/600/600) no-repeat center;
  background-size: cover;
}

header, footer, main {
  text-align: center;
}

header, footer {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80px;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: rgba(254, 254, 254, 0.33);
}

#content {
  width: 50%;
  margin: 0 auto;
}
＆＃13;
<header>I'm the header. Yay!</header>
<main>
  <div id="content">
    <h1>I'm the content</h1>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
  </div>
</main>
<footer>I'm the footer. Bye!</footer>
＆＃13;
＆＃13;
＆＃13;

Answer 2

所以我想出了一个绝对可怕的解决方案。我加载背景两次，然后在“clear”div中相应地移动它。

div {
  width: 300px;
  height: 120px;
}
#one {
  background: url('http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg');
  position: relative;
}
#two {
  background: rgba(255, 255, 255, 0.33);
  position: absolute;
  left: 0;
  top: 0;
}
#three {
  position: absolute;
  width: 150px;
  height: 100px;
  left: 50px;
  top: 10px;
  background: url('http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg');
  background-position: -50px -10px;
}

<div id="one">
  <div id="two"></div>
  <div id="three"></div>
</div>

以下是带有代码的JsFiddle。

这里的关键是背景位置。设置clear div的尺寸和位置，然后移动背景图像。请记住以与移动clear div相反的方向移动背景图像。因此背景位置的负数。

祝你好运，我真的希望你能找到更好的解决方案。

Answer 3

由于页眉和页脚的高度已知，因此很容易在背景图像上绘制不透明的叠加层，如下所示：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: medium sans-serif;
  color: white;
}
#wrapper {
  min-height: 100%;
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, .33), rgba(255, 255, 255, .33)) no-repeat left 100px/100% calc(100% - 100px - 150px),
    url(http://i.stack.imgur.com/Lhcrj.jpg) left top /cover;
}
#header {
  height: 100px;
}
#content {
  padding-bottom: 150px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
}

<div id="wrapper">
  <div id="header">header - fixed height</div>
  <div id="content">content - auto height</div>
  <div id="footer">footer - fixed height + sticky</div>
</div>

原始答案（see question）

您需要一个带背景图像和多个不透明背景图像的div：

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  top    / 100% 50px,
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  bottom / 100% 50px,
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  50px   / 50px calc(100% - 50px - 50px),
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat right 50px   / 50px calc(100% - 50px - 50px),
    url(http://lorempixel.com/output/nature-q-c-640-480-8.jpg) left top / cover;
}

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

Answer 4

您可以解决＆＃34;内容＆＃34; CSS3 calc的大小问题：

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: #FFFF33;
    background-image: url(http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: right top;
}
#wrapper {
    text-align: center;
    height: 100%;
}
#header {
    height: 80px;
    overflow: hidden;
    width: 100%;
}
#lightbackground {
    /* Actually height works for me here, but perhaps my case's simpler */
    min-height: calc(100% - 160px);
    background: rgba(255, 255, 255, 0.33);
    overflow-y: auto;
}
#content {
    width: 80%;
    max-width: 1000px;
}
/* This has much in common with #header */
#footer {
    width: 100%;
    height: 80px;
    overflow: hidden;
}

和您现在使用的HTML相同。你确实有更新＆＃34; 160px＆＃34;始终是页眉和页脚高度的总和，您可能会发现SASS对此有用。

Answer 5

您可以尝试定义：

 background-color: rgba(255,255,255,0.3);

示例：http://codepen.io/BrianDGLS/pen/zxRPMd