Question

我正在尝试显示一个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>

有人可以告诉我我在做什么错吗？

Answer 1

检查此。您已为.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>

CSS Text / Div定位

1 个答案: