Question

我想知道如何将文本放在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>

如果我没有充分澄清，我愿意接受任何建议和道歉。

Answer 1

您想将div的位置设置为＆＃34; relative＆＃34;

然后将文本和图像的位置设置为＆＃34;绝对＆＃34;。

Answer 2

这会将图像放在文本的顶部。

.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
}

<强> DEMO

Answer 3

在CSS文件中添加以下样式，并根据需要调整左侧和顶部“.images h2”

    .image { 
   position: relative;
   z-index:1; 
}
.image h2{
    position:absolute;
    left:0;
    top:0;
    z-index:2;
margin:0;
    padding:0;
}

如何将文本放在标题中的图像上？

3 个答案: