Css 从给定百分比开始的背景

我正在尝试创建一个高度可变的div，它有两种背景颜色：

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

我已经尝试了所有的方法，但仍然找不到一个好的方法来做到这一点，即使是在播放背景图像时。如果可能的话，我想避免位置：固定。并坚持使用

背景附件：已修复

以下是我想要得到的效果：

---

有没有什么方法可以让我很容易地做到这一点，并提供一个良好的浏览器支持（需要IE9）？

您发布的示例是使用一个固定位置的div，使用：before来设置辅助颜色

所以代码非常简单

HTML

---

fiddle:

解释更多，你想做什么？我想在不使用

的情况下重新创建我在jsbin中显示的效果position:fixed

。（并找到一种方法使用

背景附件：固定的
）谢谢，但我想避免使用
位置：固定的
，而是使用
背景附件：固定的
，如果可能的话。这是可能的，但是您不能指定窗口高度的百分比。如果你想使用一个百分比的窗户高度和oh将需要使用固定。如果您不想使用fixed，那么您将需要使用其他高度，并且如果没有一些javascript，您将无法确保您的“离顶部30%”要求。
<div class="wrapper">
    <div class="inner-wrapper">
       YOUR INTERNAL STUFF/CONTENT GOES HERE
    </div>
</div>

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