javascript - 如何将文本放在同时调整大小的调整大小图像上？-6ren

javascript - 如何将文本放在同时调整大小的调整大小图像上？

转载作者：太空宇宙更新时间：2023-11-04 15:06:19

我要制作.overlay div 浮在“img/5.jpg”之上。但我想要图像仍然调整大小并留在顶部。以及顶部的横幅保持不变。谢谢你!这个想法的一个例子可以在 http://thedreamcatchers.co.uk 找到。 .我宁愿只使用没有背景的文本，我将文本放在 div (.overlay) 中，因为这样看起来更容易处理。

编辑:我认为我不够清楚我想有效地 float .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>

最佳答案

您可以使用以视口(viewport)单位为单位的值在文本上设置字体大小。

这是 a demo (调整窗口大小以查看文本大小调整)

<img src="http://lorempixel.com/g/400/200" alt="" />
<div class="text">Some text</div>

CSS

img {
  width: 50%;
  height: 50%;
}
.text {
  font-size: 4vw; /* 4% of the viewport width */
}

关于javascript - 如何将文本放在同时调整大小的调整大小图像上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26733208/

文章推荐： c++ - 字符数组中的奇怪字符

文章推荐： c++ - 将二维数组设置为二维数组时出错

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将文本放在同时调整大小的调整大小图像上？

CSS