html - 他のすべてを隠すインラインimgタグの背景

Question

インライン画像タグを使用してフルサイズの背景を取得するために、オンラインのツタンカーメンをフォローしました。他のすべての要素がその背後に隠されているという事実を除けば、うまく機能します。これは基本的なことだと思いますが、頭を悩ませることはできません。

<style>
body {

}

#bg {
min-height: 800px;
min-width: 1024px;

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

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

</style>


</head>

<body>

<nav>
</nav>

<div>
<p>A line</p>
<p>A line</p>
<p>A line</p>
</div>

<img id="bg" src="images/flowers.jpg" alt="flowers" />



</body>
</html>

どんな助けでも大歓迎です。

score 0 · Accepted Answer

セットz-index to -1、

#bg {
min-height: 800px;
min-width: 1024px;

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

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

score 0 · Accepted Answer

あなたが探しているのはz-indexcssプロパティだと思います。

試す

#bg {
    z-index: -1000;
}

score 0 · Accepted Answer

「インライン」背景の意味はよくわかりませんが、CSS *の「body」セクションに配置するのではなく、別のdivとして背景を配置すると、何をしているのかがわかります。これを#bgセクションに追加してみてください。

z-index: -100;

z-indexについて。

*これはあなたのために働くことができるように私には思えます：

body {
background: url('background.jpg') no-repeat fixed center; 
}

score 0 · Accepted Answer

これにはz-indexを使用する必要があります。

この問題を修正するには、＃bgdivに-1のz-indexを指定します:)

#bg {
min-height: 800px;
min-width: 1024px;

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

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

これがjsfiddleの例です-http ://jsfiddle.net/KN8na/

参考文献：

http://reference.sitepoint.com/css/z-index

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

score 0 · Accepted Answer

body {

}

#bg {
z-index: -1000;
background: #ff0;
min-height: 800px;
min-width: 1024px;

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

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

jsfiddleのソリューションデモをご覧ください。

score 0 · Accepted Answer

画像を上に移動するだけでかまいません...そうすれば、余分なcssは必要ありません。

<img id="bg" src="images/flowers.jpg" alt="flowers" />

<div>
<p>A line</p>
<p>A line</p>
<p>A line</p>
</div>

z-indexただし、画像を負の値に設定したり、画像をbody要素の背景として設定したりするなど、他の解決策も機能します。

html - 他のすべてを隠すインラインimgタグの背景

6 に答える 6

Related

Reference