我想做 .overlay div浮在＆＃34; img / 5.jpg＆＃34;之上。但我想要的图像 仍然调整大小并保持在最高位置。以及顶部的横幅 保持不变。谢谢！可以在http://thedreamcatchers.co.uk找到这个想法的一个例子。我宁愿只使用没有背景的文本，我将文本放在div（.overlay）中，因为它似乎更容易使用。
编辑：我不认为我足够清楚我想有效地浮动。覆盖在＃maincontent1
内的图像上
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#wrapper{
height: auto;
width: 100%%;
}
.overlay {
width:53%;
padding:2% 2% 3%;
background-color: green;
background-repeat:repeat;
text-align:left;
z-index:1;
}
#maincontent1 h1{
z-index:100;
position:static;
color:white;
}
#maincontent1 img{
width: 100%;
position:static;
top: 0;
left: 0;
z-index:-1;
}
#maincontent2 {
clear: both;
}
#maincontent3 {
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 20%;
margin-right: 20%;
clear: both;
}
#maincontent4 {
width:100%;
clear: both;
}
#maincontent5 {
clear:both;
background-image: url(../img/3.jpeg);
padding-top: 10%;
padding-bottom: 10%;
}
.maincontent5_text{
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 12%;
margin-right: 12%;
background-color:#FFF;
clear: both;
border-color:#FFF;
border-style: solid; border-width: 10px;
}
.maincontent5_text h1{
display:inline;
font-family: 'Raleway', sans-serif; font-size: 30px;
text-align: right;
color: #F39C9C;
font-weight: 400;
padding-left: 5px;
}
#topbar {
margin-bottom: 0;
padding: 3px 0 3px 0;
background: #F39C9C;
width: 100%;
text-align: right;
color:white;
}
#topbar ul {
list-style: none;
margin: 0;
padding: 0;
}
#topbar ul li {
margin: 0;
padding: 0;
display: inline;
} <html lang="en">
<div id="wrapper">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="topbar">
<ul>
<li><a href="#">LOGO</a></li>
<li>Email</li>
<li>Telephone</li>
</ul>
</div>
<div id="maincontent1">
<img src="http://placehold.it/1920x1080"/>
<div class="overlay">
<h1>Some Text Here</h1>
</div>
</div>
<style>
.menu1 p {
text-align: center;
font-family: 'Comfortaa', cursive;
font-size: 20px;
}
</style>
<div id="maincontent2">
<table width="100%" height="10%" border="0" class="menu1">
<tr>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Home</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>About</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Portfolio</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Contact</a></p></td>
</tr>
</table><hr width="100%" color="#F39C9C">
</div>
<div id="maincontent3">
<h1 style="font-family: 'Raleway', sans-serif; font-size: 36px; text-align:center; color:#F39C9C; font-weight:400;"> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p>
</div>
<div id="maincontent4">
<iframe src="http://youtube.com/embed/2YBtspm8j8M?controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&rel=0&showinfo=0" width="100%" height="500px" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="maincontent5" >
<div class="maincontent5_text">
<img src="http://placehold.it/200x200" style="display:inline; float: left;">
<h1 style=""> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p></div>
</div>
</div>
答案 0 :(得分：3)
您可以使用视口单元中的值设置文本的字体大小。
此处＆＃39; a demo（调整窗口大小以查看文字大小调整）
<img src="http://lorempixel.com/g/400/200" alt="" />
<div class="text">Some text</div>
img {
width: 50%;
height: 50%;
}
.text {
font-size: 4vw; /* 4% of the viewport width */
}
答案 1 :(得分：1)
您将#maincontent1设置为position: relative;并将.overlay设置为position: absolute;然后您可以使用top或bottom {{}来定位叠加层1}}或right值。
答案 2 :(得分：1)
使用媒体查询和字体大小百分比
小提琴（调整窗口大小以使其生效）
<强> http://jsfiddle.net/vntjqnf8/2/
CSS
body{
font-family: 'Raleway', sans-serif;
font-size: 36px;
font-weight:400;
height:100%;
width:100%;
margin:0 auto;
}
.resize{
text-align:center;
color:#F39C9C;
font-size:100%;
width:100%;
}
@media screen and (max-width: 680px){
.resize{
font-size: 50%;
}
}
HTML
<h2 class="resize" >
"They were extremely good at responding to feedback and worked incredibly hard."
</h2>