如何建立一个背景色超过一种的网站？
[英]How do I do a website with more than 1 background color?
问题描述
this is what i got, but that is only one background color that fill 90% of the screen. 
这就是我得到的，但这只是一种可以填充屏幕90％的背景色。 But i would like to have another color under. 但是我想用另一种颜色。
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 90%;
background-color: #20a2d6;}
You can find an example of what I'd like to get here 您可以找到我想要到达这里的示例
3 个解决方案
解决方案1
1 2014-12-05 23:08:27
http://www.spelltower.com/ is using HTML section tags for those colored backgrounds. http://www.spelltower.com/正在将HTML部分标签用于这些彩色背景。 It's not just a single element with multiple background colors. 它不仅仅是具有多种背景颜色的单个元素。 Javascript is used to resize each section as the browser window is resized. 调整浏览器窗口大小时，使用Javascript调整每个部分的大小。
HTML HTML
<div>
<section id="first_section">First Section</section>
<section id="second_section">Second Section</section>
<section id="third_section">Third Section</section>
</div>
CSS CSS
#first_section { background_color: blue; }
#second_section { background_color: red; }
#third_section { background_color: green; }
Javascript 使用Javascript
//When the browser window is resized...
$(window).resize(function() {
// Get the new window height
var windowHeight = $(window).height();
//Determine the height we want each section, in this
//case we don't want it to be less than 600 pixels tall
var newHeight = windowHeight;
if(newHeight<600) newHeight = 600;
$('section').css('height', newHeight);
});
解决方案2
0 2014-12-05 23:03:29
If you inspect the source on spelltower.com, you'll note that what you are seeing ins't multiple background colors applied to the whole page. 如果您在spelltower.com上检查源代码，则会注意到所看到的并不是将多种背景颜色应用于整个页面。 Each of those sections has it's own background color. 每个部分都有其自己的背景色。
解决方案3
0 2014-12-05 23:12:10
If you want your body being 90% of one color and the remaining 10% of another color, then you should create two containers into your HTML body: to each of it, you will assign a different CSS. 如果要使主体为一种颜色的90％，其余为另一种颜色的10％，则应在HTML主体中创建两个容器：为每种容器分配一个不同的CSS。 To explain you the logic (I let you do the rest about positioning, sizing etc.): 为了向您解释逻辑（其余的内容我将留给您进行定位，调整大小等）：
HTML: here you create two separate div containers... HTML：在这里您创建了两个单独的div容器...
<body>
<div id="first_section">
<div/>
<div id = "second_section">
<div/>
<body/>
Hence, you will attribute the style properties into your CSS to each of them... 因此，您需要将样式属性归因于CSS中的每个属性...
#first_section{
width: 100%;
height: 90%;
background-color: red;
}
#second_section{
width: 100%;
height: 10%;
background-color: blue;
}
I would suggest in particular Bootstrap , which is a nice collection of classes and Javascript functions that will allow your website to be responsive as soon as the browser size changes (from full-screen to tablet or phone, for example). 我特别建议Bootstrap ，它是一个很好的类和Javascript函数的集合，可让您的网站在浏览器大小发生变化（例如从全屏到平板电脑或手机）后立即响应。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.