拆分背景颜色HTML

概述所以,我知道这是用两种颜色分割背景的代码： #top,#bottom { position: fixed; left: 0; right: 0; height: 50%;}#top { top: 0; background-color: orange;}#bottom { bottom: 0; background-co 所以,我知道这是用两种颜色分割背景的代码：

#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％,而是在原始高度？

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

试试这个：

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完成.我将在不使用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 " + gradIEntStop + "px,green " + gradIEntStop + "px,green)";}

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

请注意,我使用“DOMContentLoaded”和未加前缀的线性渐变意味着这只适用于现代浏览器(IE 9,Safari 3.1 – 2010或更高版本,基本上)

总结

以上是内存溢出为你收集整理的拆分背景颜色HTML全部内容，希望文章能够帮你解决拆分背景颜色HTML所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。