HTML画像が他のコントロールの上に表示される

<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> html {height:100%;} body {height:100%; margin:0; padding:0;} #bg {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1;} </style> <center> <div> <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font> </div> </center> </head> <body> <div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" /> <font size="30" color="red">Pic 1</font><br> <img src="C:\1jpg" alt="" style="width:450px;height:500px;"> </body> </html>

を使用してDIVの背景として画像を作る私はテストそれのためのデモ映像を使用。ここに作業コード： z-index: -1;を#bgに追加するだけです。

html {height:100%;} 
 
    body {height:100%; margin:0; padding:0;} 
 
    #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;} 
 
    #content {position:relative; z-index:10;}

<center> 
 
    <div> 
 
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font> 
 
    </div> 
 
</center> 
 

 
<body> 
 
<div id="bg"> 
 
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" /> 
 
</div> 
 
<font size="30" color="red">Pic 1</font><br>  
 
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">

出典

2016-08-03 13:58:44 Dave

それはそれを得ました！ありがとうございました –

私はz-indexを使用します。要素の順序を変更することができます。だから、z-index: 1;を持つ要素は、z-index: 0;

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<style type="text/css"> 
 
    html {height:100%;} 
 
    body {height:100%; margin:0; padding:0;} 
 
    #bg {position:fixed; top:0; left:0; width:100%; height:100%;} 
 
    #backgroundImage{z-index: -1;} 
 
    #content {position:relative; z-index:1;} 
 
</style> 
 
<center> 
 
    <div> 
 
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font> 
 
    </div> 
 
</center> 
 
</head> 
 

 
<body> 
 
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" /> 
 
<font size="30" color="red">Pic 1</font><br>  
 
<img src="C:\1jpg" alt="" style="width:450px;height:500px;"> 
 
</body> 
 
</html>

出典

2016-08-03 13:55:51 Taylor

これはまだdivタグの何かをカバーする背景画像を持っています....画像とテキストPic 1は隠されています –

次に、Zインデックスを置く： 1; CSSの画像に直接スタイルを適用します。 z-indexを追加するために投稿を編集しました：-1; divの代わりに背景画像に追加します。 – Taylor

同じ結果です。背景画像なし。 –

代わりの要素として画像を置くことで要素の前に表示されるあなたはdiv要素の背景画像のプロパティを設定しようとしましたか？それはあなたが探している効果を提供するはずです。次のルールをCSSファイルに追加します。

#bg { 
    background-image: url("C:\KittyKat.jpg"); 
    width:100vw; 
    height:100vh; 
}

出典

2016-08-03 13:56:14

他の要素や属性は表示されますが、背景イメージは表示されません。 –

@RedLightGreenLightあなたのニーズを満たすように編集された答え。 –

CSS

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<style type="text/css"> 
 
    html {height:100%;} 
 
    body {height:100%; margin:0; padding:0;} 
 
    #bg { 
 
    position:fixed; 
 
    width:100vw; 
 
    height:100vh; 
 
    background: url('C:\KittyKat.jpg'); 
 
    background-size: cover; 
 
    } 
 
    #content {position:relative; z-index:1;} 
 
</style> 
 
<center> 
 
    <div> 
 
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font> 
 
    </div> 
 
</center> 
 
</head> 
 

 
<body> 
 
<div id="bg"></div> 
 
<font size="30" color="red">Pic 1</font><br>  
 
<img src="C:\1jpg" alt="" style="width:450px;height:500px;"> 
 
</body> 
 
</html>

出典

2016-08-03 13:57:43

これは本文のテキスト/イメージを表示しますが、実際には背景イメージを表示しません。 –

編集した背景画像がまだ私のページに表示されていなくても。 –

HTML画像が他のコントロールの上に表示される

答えて

関連する問題