Question

我试图构建一个启动页面（静态页面），问题是在添加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>

Answer 1

尝试添加：

position: relative;

到 .splashHold

所以你需要：

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

不需要z-index。

Answer 2

我可以建议吗？

<!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>

启动页面（登陆页面）wordpress

2 个答案: