Question

所以，我知道这是用两种颜色分割背景的代码：

#top,
#bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 50%;
}

#top {
    top: 0;
    background-color: orange;
}

#bottom {
    bottom: 0;
    background-color: green;
}

此处的来源可在此处显示：http://dabblet.com/gist/2870276。

在我的网站上，而不是50％和50％，我有30％和70％。我如何做到这一点，以便当浏览器调整为水平收缩时，前30％不会保持在30％但是在原始高度？

Answer 1

我建议使用渐变而不是文档元素来表示这样的背景效果。

试试这个：

body {
    background-image: linear-gradient(to bottom, orange, orange 50%, green 50%, green);
    background-size: cover;
    background-repeat: no-repeat;
}

请注意，您需要使body元素填充页面：

html, body {
    margin: 0;
    height: 100%;
}

以下是我的示例：http://dabblet.com/gist/4ba4bde188af953dcdcc

那就是说，我不明白你的意思是“水平收缩”或“原始的高度” - 我希望我已经回答了你所寻找的东西。

更新

根据评论中的阿尔伯特，OP希望在加载页面时30％相对于视口的高度。这是可行的，但必须通过JavaScript完成。我将在不使用jQuery的情况下提供纯JS实现。

window.addEventListener("DOMContentLoaded", setBodyGradientOnLoad);

function setBodyGradientOnLoad() {
    var heightPx = window.innerHeight;
    var gradientStop = Math.floor( heightPx * 0.3 );
    var body = document.getElementsByTagName("body")[0];
    body.style.backgroundImage = "linear-gradient(to bottom, orange, orange " + gradientStop + "px, green " + gradientStop + "px, green)";
}

请注意，您仍然需要CSS的其余部分来应用background-size和background-repeat选项，以及为禁用JavasScript的浏览器提供备用。

请注意，我使用“DOMContentLoaded”和未加前缀的linear-gradient表示这只适用于现代浏览器（IE 9 +，Safari 3.1+ - 2010或更高版本，基本上）

Answer 2

只需使用Javascript！转换＆＃34;％＆＃34;到＆＃34;＃像素＆＃34;当页面加载时，然后再也不转换它，这样即使用户调整页面大小，高度也是恒定的，是页面原始高度的30％，而不是页面的新高度

（*注意：这不会在Dabblet.com上工作，因为它不支持Javascript ..这里是JSFiddle版本的操作。http://jsfiddle.net/x35o09m1/）

<html>
<head>

<div id="bottom" style="position: fixed; left: 0; right: 0; bottom: 0; height:100%; background-color: green;">bottom - 70%</div>
<div id="top" style="position: fixed; left: 0; right: 0; top: 0; background-color: orange;">top - 30%</div>

<script type="text/javascript">

    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    document.getElementById("top").style.height = (y*0.3)+"px";

</script>


</head>
</html>

Answer 3

我建议不要使用两个元素来这样做。只使用一个并设置＆＃34;分割背景颜色＆＃34;像这样。顺便说一句，纯粹使用CSS完成此操作将使其响应所有屏幕大小调整。

我用CSS完全解决了这个问题，没有额外的DOM元素！这意味着两种颜色纯粹是一种元素的背景颜色，而不是两种颜色的背景颜色。

我使用渐变，因为我将颜色设置得非常紧密，看起来好像颜色不同而且它们没有混合。

以下是本机语法中的渐变：

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

颜色#74ABDD从0%开始，在#74ABDD处仍为49.9%。

然后，我强制渐变移动到元素高度0.2%内的下一个颜色，创建两种颜色之间看起来非常实线的颜色。

结果如下：

Split Background Color

here's my JSFiddle!

玩得开心！

Answer 4

如果要保持特定背景颜色不变，可以始终使用像素而不是百分比。但是，如果它是您尝试保持固定的导航部分，您也可以使用Bootstrap。以下是固定导航块的示例：http://startbootstrap.com/templates/freelancer/

Answer 5

我将继续回答这个问题，最低限度地影响OP代码：

#top{       
    position: fixed;
    left: 0;
    right: 0;
    height: 30%;
}
#bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 70%;
}

#top {
    top: 0;
    background-color: orange;
}

#bottom {
    bottom: 0;
    background-color: green;
}

拆分背景颜色HTML

5 个答案:

更新