如何在标题中的图像上放置文本？
[英]How do I place the text on the image in the header?
问题描述
I want to know how to place the text in the div tag that encompasses the image in the header on the image. 
我想知道如何将文本放入包含图像的div标签中的图像标题中。 it always ends up slightly below the image? 它总是最终略低于图像？ I am just doing this as a hobby and I am not too talented at it. 我只是作为一种业余爱好而做的，我并不是很有才。 The Css 的CSS
#center
{
background-color:black;
width: 1100px;
height: 1000px;
margin-left:auto;
margin-right:auto;
background-image:inherit;
}
#header
{
width: 100%;
height: 4%;
margin-left:auto;
margin-right:auto;
background-color: black;
background: rgba(0, 0, 0, 0.6);
}
#banner
{
margin-bottom: -12px;
margin-top: -4px;
}
#space1
{
width: 100%;
height: 2%;
}
#space2
{
width: 100%;
height: 1%;
}
#space3
{
margin-left: auto;
margin-right: auto;
width: 2%;
height: 80%;
float: left;
}
#menuBack
{
background-color: black;
height: 75%;
width: 20%;
margin-top: auto;
margin-right:auto;
margin-left: auto;
float: left;
opacity: 0.8;
}
#menu1
{
background-color: inherit;
height: 13%;
width: 30%;
margin-top: 5%;
margin-right: auto;
margin-left: auto;
font-family: "Times New Roman";
font-size: 30;
color:080808;
}
#menu3
{
background-color: inherit;
height: 2%;
width: 30%;
margin-top: -20%;
margin-right: auto;
margin-left: 18%;
margin-bottom:10%;
}
#menu2
{
transition-property: color;'
transition-timing-function: linear;
transition-duration: 0.1s;
color:White;
}
#menu2:hover
{
color: C0C0C0;
}
#content
{
background-color: black;
margin-left: auto;
margin-right: auto;
width: 78%;
height: 80%;
float: left;
opacity: 0.8;
}
#bodyc
{
background-image:url("background.jpg");
}
.image {
position: relative;
}
h2 {
position: absolute;
color:white;
width: 100%;
}
The Html HTML
<html>
<head>
<title>text</title>
<link rel="stylesheet" type="text/css" href="CSSsheet.css">
</head>
<body id = "bodyc">
<div id = "center">
<div id = "space1">
</div>
<div id = "header">
<div class="image">
<img src = "Banner.png" alt= " " width="243" height="43" />
<h2> text </h2>
</div>
</div>
<div id = "space2"> </div>
<div id= "menuBack">
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2"><b>Home</b></p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu3"><img src ="photographylogo.png" width = "150" height = "125" /></div>
</div>
<div id = "space3"> </div>
<div id= "content">
<p> This is a website </p>
</div>
</div>
</body>
</html>
I am open to any and all suggestions and apologies if I did not clarify enough. 如果我不够清楚，我愿意接受所有建议和歉意。
3 个解决方案
解决方案1
0 已采纳 2014-05-20 04:43:46
You want to set the position of the div to "relative" 您想要将div的位置设置为“相对”
Then set the position of the text and the image to "absolute". 然后将文本和图像的位置设置为“绝对”。
解决方案2
0 2014-05-20 04:46:58
解决方案3
0 2014-05-20 04:53:59
Add below style in you CSS files and adjust the left and top as you want from class ".images h2" 在CSS文件中添加以下样式，并根据需要在“ .images h2”类中调整左侧和顶部
.image {
position: relative;
z-index:1;
}
.image h2{
position:absolute;
left:0;
top:0;
z-index:2;
margin:0;
padding:0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.