2016-03-01 58 views
0

我的html頁面包含bg作爲IMG SRC。表被隱藏在img html

我想TABLE在某些位置上的img。

其實,我該如何讓表格顯示在圖像的頂部?

如果我使用z-index我做錯了什麼?

注意:我在img結束之後看到表格的其餘部分。

<!DOCTYPE html> 
 
<html dir="rtl" lang="he"> 
 
<body> 
 

 
<head> 
 
    <TITLE>table on img bg</TITLE> 
 
\t <script src="include/jquery-2.2.0.min.js"></script> 
 
\t <meta charset="utf-8" /> 
 
\t <style> 
 
\t \t html 
 
\t \t { 
 
\t \t 
 
\t \t } 
 
\t \t 
 
\t \t h1 
 
\t \t { 
 
\t \t font-family: arial; 
 
\t \t font-size: 350%; 
 
\t \t color: white; 
 
\t \t } 
 
\t \t 
 
\t \t #container 
 
\t \t { 
 
\t \t 
 
\t \t } 
 
\t \t 
 
\t \t #header 
 
\t \t { 
 
\t \t 
 
\t \t } 
 
\t \t #content 
 
\t \t { 
 
\t \t 
 
\t \t } 
 
\t \t #footer 
 
\t \t { 
 
\t \t 
 
\t \t } 
 
\t \t .tg {border-collapse:collapse;border-spacing:0;border-color:#ebaa80;width:1918px;} 
 
\t \t .tg td{font-family:Arial, sans-serif;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ebaa80;color:#fff;} 
 
\t \t .tg th{font-family:Arial, sans-serif;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ebaa80;color:#ebaa80;} 
 
\t \t .tg .tg-o24q{font-weight:bold;text-align:center} 
 
\t \t .tg .tg-tdef{font-weight:bold} 
 
\t </style> 
 
</head> 
 
<div id="container"> 
 
\t <img src="images/horizontal/bg.jpg" style="position: absolute; right: 0px; top: 0px;"> 
 
\t <div id="header"> 
 
\t <table class="tg"> 
 
\t <tr> 
 
\t <th class="tg-o24q">Hours</th> 
 
\t <th class="tg-tdef">1</th> 
 
\t <th class="tg-tdef">2</th> 
 
\t <th class="tg-tdef">3</th> 
 
\t <th class="tg-tdef">4</th> 
 
\t <th class="tg-tdef">5</th> 
 
\t <th class="tg-tdef">6</th> 
 
\t <th class="tg-tdef">7</th> 
 
\t </tr> 
 
\t <% 
 
\t \t Response.Write "<TR>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "a" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "b" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "c" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "d" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "e" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "f" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "g" & "</TD>" 
 
\t \t Response.Write "<td class=tg-tdef>" & "h" & "</TD>" 
 
\t \t Response.Write "</TR>" & vbCrLf 
 
\t \t Response.Write "</table>" & vbCrLf 
 
\t %> 
 
\t <div id="header"> 
 
\t \t <img src="images/horizontal/1.jpg" style="position: absolute; right: 0px; top: 0px;"> 
 
\t \t <img src="images/horizontal/2.jpg" style="position: absolute; right: 0px; top: 210px;"> 
 
\t \t <img src="images/horizontal/3.jpg" style="position: absolute; right: 0px; top: 440px;"> 
 
\t \t <img src="images/horizontal/4.jpg" style="position: absolute; right: 0px; top: 610px;"> 
 
\t \t <img src="images/horizontal/5.jpg" style="position: absolute; right: 0px; top: 1090px;"> 
 
\t \t <img src="images/horizontal/6.jpg" style="position: absolute; right: 0px; top: 1320px;"> 
 
\t \t <img src="images/horizontal/7.jpg" style="position: absolute; right: 0px; top: 1560px;"> 
 
\t </div> 
 
\t 
 
\t <div id="content"> \t \t 
 
\t \t 
 
\t </div> 
 
\t 
 
\t <div id="footer"> 
 
\t \t <img src="images/horizontal/8.gif" style="position: absolute; right: 50px; top: 1595px;"> 
 
\t \t <img src="images/horizontal/9.gif" style="position: absolute; right: 565px; top: 1595px;"> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

+0

你必須增加一個正確的片段。 –

+1

尋求調試幫助的問題(「爲什麼這個代碼不工作?」)必須包含所需的行爲,特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱:[如何創建最小,完整和可驗證示例](http://stackoverflow.com/help/mcve)。 –

+0

我與馬科斯在這一個..沒有足夠的信息,我們試圖幫助... –

回答

0

更正

你的代碼是錯誤的。 「head」標籤應該是「html」標籤的第一個孩子,因此也是「body」標籤的兄弟。

解決方案1 ​​

此外,對於 「Z-index」 屬性補充 「的位置是:絕對」 來創建這樣的重疊效應:

img { position: absolute; left: 0px; top: 0px; z-index: -1; } 

解決方案2

您可能希望嘗試刪除您的「img」標籤並用以下內容替換您的「body」標籤:

<body style="background-image:url(images/example-image-file.jpg)"> 

這會使整個圖像成爲頁面的背景。

參考