如何在标题中的图像上放置文本？
[英]How do I place the text on the image in the header?
问题描述
我想知道如何将文本放入包含图像的div标签中的图像标题中。 它总是最终略低于图像？ 我只是作为一种业余爱好而做的，我并不是很有才。 的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%;
}
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>
如果我不够清楚，我愿意接受所有建议和歉意。
3 个解决方案
解决方案1
0 已采纳 2014-05-20 04:43:46
您想要将div的位置设置为“相对”
然后将文本和图像的位置设置为“绝对”。
解决方案2
0 2014-05-20 04:46:58
这会将图像放在文本顶部。
.image h2 {
position: absolute;
color:white;
width: 100%;
top: 0px;
left: 10px; // adjust this as per your design
z-index : 99;
margin-top: 5px; // adjust this
}
解决方案3
0 2014-05-20 04:53:59
在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.