0

ページを背景画像で塗りつぶし、テキストをその背景に揃えたいと思います。以下のコードを使用すると、背景画像がページの上部に読み込まれ、テキストがその下に表示されます。「background：」関数を使用できることはわかっていますが、以下のコードで実行する方法により、ブラウザーのサイズに関係なく、自動サイズ変更が可能になります（つまり、モバイルデバイスのブラウザーサイズは小さくなります）。ですから、背景画像をテキストの後ろに配置したいだけです。

<html>
<head>

<title>Title</title>    

<style>

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    z-index: -1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    width: 781;
    margin: 50 px auto;
    height: 758;
    border: 1px solid black
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    color: #FFFFFF;
    position: relative;
}   

p
{
    font: 14px Georgia;
}

</style>

</head>

HTML 

<img class="bg" src="background.jpg">

<div id="container">

<div id="left">
    <p>
    Text
    </p>
</div>

</div>

</body>
</html>
4

3 に答える 3

2

BGイメージのz-indexを1にし、＃containerdivのz-indexを2にします。これは機能しますか？

img {
  position: relative;
  z-index: 1;
}

#container {
   position: relative;
   z-index: 2;
   top: 0px;
   left: 0px; /*or whatever top/left values you need*/
}
于 2012-07-18T14:45:00.900 に答える
2

position: fixed背景画像に使用するだけですhttp://dabblet.com/gist/3136606

img.bg {
    min-height: 100%;
    min-width: 781px;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
}

編集（これよりも見やすくする方法があればいいのに）

OK、元の質問のコメントを読んだ後、目的はどのディスプレイサイズにも適切に拡大縮小する背景を持つことであると理解しています。

残念ながら、かなりの数のモバイルデバイスに問題があります。position: fixedこれについて詳しくは、こちらをご覧ください。

したがって、この場合の最善の解決策は、imgタグではなく、背景画像を使用することです。これは、（画像を引き伸ばす-例）またはto （画面を完全に覆うように画像を拡大縮小する-例background-size）に設定されています。 ）。100%cover

于 2012-07-18T14:45:11.217 に答える
1

まあ、多分あなたはそのcssを試すこともできます：

body{
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

ページサイズが変更されても、すべてのページをカバーする必要があります

于 2012-07-18T14:46:55.897 に答える