Question

我正在玩HTML＆amp; CSS并试图创建一个非常简单的“under contruction”页面。我将背景设为黑色并将文字设为白色。我将文本放在我想要的位置，而不是试图在文本下面插入图像。我把图像放到了网站上，但不知怎的，它背后是我的背景？谁知道该怎么办？

继承我的CSS代码：

    .fullscreenDiv {
    background-color: #000000;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
    background-attachment:fixed;
}
.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -190px;
    white-space: nowrap;
    font-family: Century Gothic;
    font-size: 120%;
    color: #FFFFFF;
}
.trademark {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: 250px;
    margin-left: 400px;
    white-space: nowrap;
    font-family: Century Gothic
    font-size: 80%;
    color: #FFFFFF;
}

我的HTML：

<div class='fullscreenDiv'>
    <div class="center">Our website is currently under construction.</div>
</div>

<div class='fullScreenDiv'>
    <div class="trademark">@GameAdviser - Copyright 2014</div>
</div>

编辑：现在只是一个快速的问题，我让它工作了我的照片，并上传到我的FTP，现在当我进入网站我看不到我的照片，只是一个边框与“图像不可用”的图像或其他任何东西。看起来很奇怪，因为我之前有一张照片很好。

试图将它从png更改为jpeg，但没有任何区别。

Answer 1

您可以使用z-index之类的

z-index:199; // for the Element you want on top
z-index:-199; // for the Element you want at bottom

Answer 2

将z-index属性添加到.center并更改班级名称fullscreenDiv，而不是fullScreenDiv区分大小写。

试试这段代码：

<强> DEMO

 .center {
    position: absolute;
    width: 60%;
    height: 50px;
    top: 50%;
    left: 20%;
    font-family: Century Gothic;
    font-size: 120%;
    color: #FFFFFF;
    z-index: 10;
    text-align: center;
}

背景图像重叠插入的图像

2 个答案: