-1

我试图建立一个启动页面（静态页面），问题是当添加 div 时它们位于 bg-picture 下方.. 我该如何解决这个问题？我想要一个 600px 居中的 div 持有人，里面有内容。

我的代码，

<html><head>
    <meta charset="utf-8">

    <title>Splash Page</title>

    <style>

        img.splash {
            /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;

            /* Set up proportionate scaling */
            width: 100%;
            height: auto;

            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;

        }

        @media screen and (max-width: 1024px){
            img.splash {
                left: 50%;
                margin-left: -512px; }
        }
        .splashHold{ margin:0 auto; background-color:#0C3; width:600px; height:150px; z-index:100;}


    </style>
</head>

<body>


    <a href="ttp://planeta.se/luiza/exempelsida/"><img class="splash" src="<?php bloginfo('stylesheet_directory'); ?>/images/splashBg.jpg"></a>
    <div class="splashHold">Test writing here..</div>

4

2 回答 2

0

尝试添加：

position: relative;

到.splashHold

所以你需要：

.splashHold {
 margin: 0 auto;
 background-color: #0C3;
 width: 600px;
 height: 150px;
position: relative;
}

不需要 z-index。

于 2013-11-07T17:38:45.350 回答
0

我可以建议这个吗？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        html, body {
            min-height: 100%;
        }
        body {
            background: url(http://planeta.se/luiza/wp-content/themes/luiza_theme/images/splashBg.jpg) no-repeat center center;
        }

       .splashHold {
            position: absolute;
            width: 600px;
            height: 150px;
            left: 50%;
            top: 50%;
            margin: -75px 0 0 -300px;
            text-align: center;
            background-color:#0C3
       }

        @media screen and (max-width: 1024px){

        }


    </style>
</head>
<body>
    <div class="splashHold">Test writing here..</div>
</body>
</html>
于 2013-11-07T17:45:59.590 回答