Question

我正在尝试创建一个可变高度的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/

从给定百分比开始的背景

1 个答案: