分割背景颜色HTML

Question

分割背景颜色HTML

4

所以，我理解这是将背景分为两种颜色的代码：

#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。

在我的网站上，我使用的是30%和70%，而不是50%和50%。当浏览器水平缩小时，如何使顶部的30%不保持在30%，而是保持原始高度？请帮我解决这个问题。

- Calvin

你想要顶部的最小高度吗？ - datatoo

5个回答

4

我建议不要使用两个元素来实现这一点。只需使用一个元素并设置“分割背景颜色”即可。顺便说一下，纯粹使用CSS可以使其响应所有屏幕调整大小。

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

我使用了渐变，并且由于我将颜色停止设置得非常接近，看起来好像颜色是不同的，而且它们不会混合在一起。

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

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

颜色#74ABDD从0%开始，在49.9%仍然是#74ABDD。

然后，我强制渐变在元素高度的0.2%范围内转移到下一个颜色，从而创建出两个颜色之间非常坚实的线条。

这是最终效果：

Split Background Color

并且这是我的JSFiddle！

玩得开心！

- WebWanderer

1

只需使用JavaScript！在页面加载时将“％”转换为“#pixels”，然后不再转换，这样即使用户调整页面大小，高度也保持不变，仍为页面原始高度的30％，而不是页面新高度的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>

- Albert Renshaw

0

我会继续回答这个问题，尽量对原始代码影响最小化：

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

- psahakyan

0

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

- Swati Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dai · Accepted Answer

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

尝试这个：

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

话虽如此，我不明白你所说的“水平缩小”或“原始高度”的含义 - 我希望我已经回答了你所寻找的答案。

更新：

根据评论区的Albert所说，OP希望在页面加载时将30％相对于视口的高度进行调整。这是可以做到的，但必须通过JavaScript来完成。我将提供一个纯JS实现而不使用jQuery。

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选项，以及为禁用JavaScript的浏览器提供备用方案。

请注意，我使用的"DOMContentLoaded"和未加前缀的linear-gradient意味着这仅适用于现代浏览器（IE 9+，Safari 3.1+ - 2010年或之后的版本，基本上）。