CSS: 撤销父级的透明颜色

Question

我的 #wrapper div 中有图像背景，#lightbackground div 中有 33% 透明的白色 "overlay"（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 中那样放置] 并且只有 #footer div 内的背景部分应该显示出来。

Answer 1

您可以尝试定义：

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

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

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 代码。

这里的关键是背景位置。设置清除 div 的尺寸和位置，然后移动背景图像。请记住将背景图像移动到与您移动清除 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

更新答案

根据您的编辑和您提供的 fiddle，我认为这对 Flexbox 来说是一件好事：

将正文设置为至少具有 min-height: 100vh
使用 flex: 0 0 80px
让<main>用flex: 1 1 auto

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

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

Answer 5

您可以使用 CSS3 calc 解决 "content" 大小问题：

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 相同。您确实有麻烦将“160px”更新为始终是页眉和页脚高度的总和，您可能会发现 SASS 对此很有用。

CSS: 撤销父级的透明颜色

CSS: revoke transparent color from parent

html

css

transparency