有問題，把文字上的圖像

Question

我創造我的第一個網站的頂部....

我想創建我的主頁平鋪圖像的主題。我剛剛處理了這個問題，現在正試圖將文本放在圖像上。

我設法讓第一個圖像做得相當好，但是當我嘗試向第二個圖像添加文本時，文本仍保留在第一張圖片上？

Here是一個鏈接到屏幕截圖，更好地解釋發生了什麼。

HTML爲第一工作圖像：

<div id="maincontentcontainer"> 
    <div class="standardcontainer" id="example"> 
     <div class="image"> 
     <img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em;" alt="The View"> 

<h2><span>Top Story - The View:<span class='spacer'></span><br /><span class ='spacer'>  </span>Local superstars head home to play a special one-off gig</span></i></h2> 
     </div> 

CSS爲第一工作圖像：

.image { 
position: relative; 
width: 100%; /* for IE 6 */ 
} 

h2 { 
position: absolute; 
top: 200px; 
left: 0; 
width: 100%; 
} 

h2 span { 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px; 
background: rgb(0, 0, 0); /* fallback color */ 
background: rgba(0, 0, 0, 0.7); 
padding: 10px; 
} 

h2 span.spacer { 
padding:0 5px; 
} 

這裏是第二圖像的HTML：

<div class="image">    
<img src="stan-urban.jpg" style="float: left; width: 20%; bottom: 0px; margin-right: 1%; margin-bottom: 0em;" alt = "Stan Urban"> 
                              <h3><span>Stan Urban:<span class='spacer'></span><br /><span class ='spacer'></span>Veteran returns</span></i></h3> 
     </div> 

這裏是第二張圖片的CSS：

h3 { 
position: absolute; 
top: 184px; 
left: 0; 
width: 100%; 
} 

h3 span { 
color: white; 
font: bold 10px/30px Helvetica, Sans-Serif; 
letter-spacing: -1px; 
background: rgb(0, 0, 0); /* fallback color */ 
background: rgba(0, 0, 0, 0.7); 
padding: 10px; 
} 

h3 span.spacer { 
padding:0 5px; 
} 

Answer 1

那是因爲你有possition:absolute。添加第二張圖片left:200或多少你想要的。