css - 以给定百分比开始的背景

Question

我正在尝试创建一个具有 2 种背景颜色的可变高度的 div:

• 一个背景覆盖整个表面
• 一个背景从窗口顶部开始 30%，高度为窗口的 70%(不是 div)。此背景将固定在滚动条上。

我已经尝试了所有方法，但仍然找不到好的方法，即使是在播放背景图像时也是如此。如果可能，我想避免使用 position: fixed。并坚持使用 background-attachment: fixed。

这是我想要得到的效果:http://jsbin.com/gabuvakegane/1/

有什么方法可以让我轻松完成这项工作，并提供良好的浏览器支持(需要 IE9)？

Answer 1

您发布的示例使用固定位置的 div，并使用 :before 设置辅助颜色。

所以代码非常简单。

HTML

<div class="wrapper">
    <div class="inner-wrapper">
       YOUR INTERNAL STUFF/CONTENT GOES HERE
    </div>
</div>

CSS

    .wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:pink;
    overflow: scroll;
    z-index: 1;
}
.inner-wrapper {
    z-index: 10;
}
.wrapper:before {
    content: '';
    position: fixed;
    top: 30%;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: green;
    z-index: -1;
}

fiddle :http://jsfiddle.net/6zcx8q2a/