我正在为一个朋友创建一个网站。然而,我想将一个包含4个部分的div放在一个绝对定位的图像下面。这是必须的,因为我希望它在不使用任何javascript的情况下随着窗口大小的变化而调整大小。有人能想出办法吗。
页面如下:
https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html
基本上,无论浏览器大小,我都希望颜色鲜艳的部分从图像后面开始。
非常感谢您的帮助,谢谢,
马特
<style>
body{
width: 99%;
height: 1050px;
background-color: #FFF;
font: 80%/1.65 "Open Sans", sans-serif;
}
#header{
width: 100%;
height: 50px;
position: fixed;
top:0;
left:0;
background-color: #FFF;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBE8E4));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBE8E4 100%);
border-bottom: 1px solid rgba(0,0,0,0.4);
}
#nav{
width: 600px;
position: absolute;
top: 0;
right:0;
height: 50px;
margin-right: 20px;
}
#nav ul{
list-style: none;
height: 50px;
position: absolute;
top: 0;
margin: 0;
display: block;
right:0 !important;
}
#nav li{
display: inline-block;
height: 50px;
border-bottom: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav li a{
display: block;
height: 50px;
padding-top: 16px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px !important;
border-bottom: none;
color: #000;
text-decoration: none;
/*text-transform: uppercase;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav a:hover{
color: #000;
background: rgba(0,0,0,0.1);
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
}
.banner {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/adam.jpg) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-2;
border-bottom: 1px solid rgba(0,0,0,0.4);
-webkit-box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
/*position: relative;
margin-top: -60px;*/
}
.overlay {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/overlay.png) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-1;
border-bottom: 1px solid rgba(0,0,0,0.4);
/*position: relative;
margin-top: -60px;*/
}
.about {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: red;
display: block;
}
.about2 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: blue;
display: block;
}
.about3 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: yellow;
display: block;
}
.about4 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: green;
display: block;
}
#container{
background-color: red;
margin: auto;
padding: 0;
width: 1000px;
height: 70%;
}
</style>
<html>
<head>
</head>
<body>
<!-- Start Navigation -->
<div id="header">
<div id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">work</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></div>
</div>
<!-- End Navigation -->
<!-- Start Main Image -->
<section class="banner" style="height: 100%;">
</section>
<!-- End Main Image -->
<div style="width: 99%;
height: 100%;">
<section class="about">
<h5>Hello World</h5>
</section>
<section class="about2">
<h5>Hello World</h5>
</section>
<section class="about3">
<h5>Hello World</h5>
</section>
<section class="about4">
<h5>Hello World</h5>
</section>
</div>
</body>
</html>
