Question

我的图片/标题未显示在我的图片上，我正在尝试将其用作此网页的背景。这是我现在的代码：

HTML:

<body id="body">

    <div id="navbar">
         <h1 id="name">Lorem ipsum</h1>
        <img class="backgroundimg" src="leaf.jpg" alt="A leaf"/>

    </div>


    <div class="backimg">
    <img class="backgroundimg" src="buildings.jpg"/>
    </div>

    <div class="backimg">
    <img class="backgroundimg" src="squares.jpg"/>
    </div>

</body>

CSS:

 body {
    background-color:black
}


 backgroundimg {
    position:relative;
    width:1175px;

}

 name {
    position:absolute;
    color: white;
    z-index;
}

任何提示？附：我拿出了'＃'和'。'到CSS中的相应名称。

Answer 1

使用z-index在图像上显示文字。

Answer 2

你可以使用z-index，就像Anil Panwar所说的那样（https://stackoverflow.com/a/34374513/4900669）

#name {
   position:absolute;
   color: white;
   z-index: 10;
}

https://jsfiddle.net/08voh0fp/

Answer 3

将此添加到您的css文件

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

根据您的需要调整顶部，左侧和宽度，如果这有帮助，请告诉我

HTML文字未显示在图片

3 个答案: