CSS背景覆蓋圖像

我做的CSS圖像，使其涵蓋了我的網站的全面的背景，然後在HTML我添加了一個圖片。圖片在那裏，但我不能看到它，因爲它覆蓋了CSS背景。

CSS

{ 
margin: 0; 
padding: 0; 
} 

html, body, #bg, #bg table, #bg td, #cont { 
height:100%; 
width:100%; 
overflow:hidden; 
} 

#bg { 
position: relative; 
} 

#bg div { 
height:200%; 
left:-50%; 
position:absolute; 
top:-50%; 
width:200%; 
} 

#bg td { 
text-align:center; 
vertical-align:middle; 
} 

#bg img { 
margin:0 auto; 
min-height:50%; 
min-width:50%; 
} 

#cont { 
position:absolute; 
top:0;left:0; 
z-index:70; 
overflow:auto; 
} 

.box { 
margin: 0 auto; 
width: 400px; 
padding: 50px; 
background: white; 
padding-bottom:100px; 
font: 14px/2.8 Georgia, Serif; 
}

HTML

<!DOCTYPE html> 
<html> 

<head> 


<meta charset="utf-8"> 



<title>Full Page Background Image | CSS #1</title> 



<div style="background: url (C:\Users\***\Desktop\site\picture.png; z-index:1"> 
<img src="C:\Users\*****\Desktop\site\picture.png" position:relative; left:-20px;/> 
</div> 

<style> 

    img.bg { 
     /* 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.bg { 
      left: 50%; 
      margin-left: -512px; } 
    } 

#page-wrap { position: relative; width: 400px; margin: 50px auto; padding:  20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } 
    p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } 
</style> 
</head> 

<body> 

<img src="images/bg.jpg" class="bg"> 

<div id="page-wrap"> 

text 


</div> 

</body> 

</html>

任何建議...謝謝

來源

2013-05-26 user2422719

WRONG ..u需要做的把這樣 – swapnesh

你需要採取的股利了，你試圖插入樣式標籤之前圖片頭。不要將正文內容放在網站的頭部標籤中。 – Kristy

變化，你希望它被證明相對或絕對，我可以將圖像的位置我不會記得具體是什麼，我現在就去努力..

來源

2013-05-26 17:22:09

<div style="background-image:url('image.jpg');"} 
<img src="image2.jpg" position:relative; left:-20px;/> 
</div>

來源

2013-05-26 17:42:10

將背景圖像上的z-index更改爲0，並將要顯示的圖像上的z-index更改爲99。這可以通過以下方式完成：

(background id) { 
    z-index: 0 } 
(image id) { 
    z-index: 99 }

這應該使圖像在背景的上方。
希望這有助於:)

來源

2014-05-21 19:00:12

CSS背景覆蓋圖像

回答

相關問題