代码之家 › 专栏 › 技术社区 › Fred B.

HTML/BODY高度不会调整为具有粘性页脚和不透明度层的内容

opacity html

Fred B. · 技术社区 · 13 年前

我希望不透明度层填充到与内容量无关的底部。所以内容很少;延伸到底部,内容丰富;延伸到底部。

我尝试了大量的方法,例如 border-box , display:block ,以及我在过去三天里找到的所有其他人试图弄清楚这一点。

我还尝试将内容设置为 min-height:800px 因此,即使内容很少,它也总是显示为已填充,但当内容超过800px时,也会出现同样的问题。 http://jsfiddle.net/rZkSx/ 或出现问题的原始站点: http://www.fredberentsen.com/fotosafari/index.html

简短版本:
我希望白色不透明度层从上到下填充,无论内容的大小。

1 回复 | 直到 13 年前

tiagojpdias 13 年前

在HTML中添加一个div和一个类(例如:mask)

<div class="mask></div>

在CSS中,将规则添加到该类中

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

我已经更新了你的 Fiddle 还有。