从给定百分比开始的背景

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

小提琴：http://jsfiddle.net/6zcx8q2a/