在html表格中覆蓋圖像

我正在創建一個電子郵件模板並使用表格來定位內容。我想重疊另一個圖像，但我不能這樣做。我在一行中使用以下內容，但似乎不起作用。如果有人能幫助我，我會很感激。在html表格中覆蓋圖像

<td colspan="3" style="padding: 14px; background-color: rgb(241, 241, 241); font-size: 11px; font-family: arial,helvetica; color: rgb(69, 85, 95); 
.under{ 
position:absolute; 
left:80px; 
top:0px; 
z-index:-1; 
} 
.over 
{ 
position:absolute; 
left:50px; 
z-index:1; 
}">

來源

2011-08-06 iman453

裏面寫入你有幾個問題：

你不能把類的style屬性。
顯然，你試圖絕對定位你的圖像，但他們的父母有position: static（默認），所以他們將被定位爲（可能）身體而不是表格單元格。絕對定位的元素相對於其最接近的祖先而言，其位置不是靜態的。
根據瀏覽器設置<td>上的position可能會也可能不會，CSS2實際上表示在表元素results in undefined behavior上設置position:relative。

你需要把<div>放在你的<td>的相對位置。然後將圖像放在<div>內，並且由於您正在處理電子郵件，請將其樣式內聯。其結果將是這樣的：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div style="width: 100px; height: 100px; position: relative; border: 1px solid #000;"> 
        <img src="http://placekitten.com/50/50" width="50" height="50" style="position: absolute; top: 0; left: 10px; z-index: 2; border: 1px solid #0ff;"> 
        <img src="http://placekitten.com/75/75" width="75" height="75" style="position: absolute; top: 0; left: 20px; z-index: 1; border: 1px solid #f00;"> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

我已經添加邊框，小貓，並用於演示目的在<div>明確的大小。這裏有一個實時版本：http://jsfiddle.net/ambiguous/TkF24/

電子郵件客戶端將過濾CSS和通過取決於客戶端。您可能需要手動粘貼圖像，然後只參考一張圖像以使其可靠工作。

來源

2011-08-06 22:36:48

人們對堆棧溢出的幫助永遠不會讓我驚歎:)感謝您的回覆！我現在就試試看。 – iman453

它可以在您發送的演示網站上運行，但是當我在我的電子郵件中插入完全相同的代碼時，它會將它們排列在彼此旁邊，而不是覆蓋它們。無論如何，我可以下午你我的代碼？（我用它來啓動，不想公開發布它。）我明白它是否太麻煩。 – iman453

@ iman453：我真的不想看別人的非公開代碼，這裏面涉及一些道德問題。你能在jsfiddle上產生一個結構上等效的版本嗎？可以在公開場合允許嗎？ –

你不能在元素的style屬性內寫出一個類。樣式定義應該在樣式表或<style>元素

來源

2011-08-06 22:24:31 silverstrike

在html表格中覆蓋圖像

回答

相關問題