-1

スプラッシュ ページ (静的ページ) を作成しようとしていますが、問題は、bg-picture の下にある div を追加するときです。どうすれば解決できますか? コンテンツを含む 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 に答える