我正在尝试显示一个 html 网页，该网页的图像覆盖整个页面。位于图像顶部居中的文本，但明显在前面，因此可以看到。
示例:https://gyazo.com/8f7015a61a296f71c02e2b4030710074
这就是我得到的:https://gyazo.com/0a2f9ad37eaf05cd1cb5a623f75d6bca 我的文字显示在底部，也不在图像上方。
这是我的 CSS:
body {
background-color:brown;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 50%;
left: 50%;
text-align:top;
}
这是我的 HTML:
<!doctype HTML>
<html>
<body>
<div class="container">
<img src="images/image.jpg" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
有人可以告诉我我做错了什么吗？
最佳答案
检查这个。您为 .title 而不是 .Title 指定了样式。请检查一下。其他一切都按预期工作。
body {
margin: 0;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 10px;
left: 0;
right: 0;
}<html>
<body>
<div class="container">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>关于html - CSS 文本/Div 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52490593/