Table rowspan透明圖片

我的桌子有問題。我想要一個透明背景的圖片在時事通訊的右上角。下面的代碼：Table rowspan透明圖片

<table> 
    <tr> 
     <td> 
      <img src="header.png" alt="header" class="headerImg" /> 
     </td> 
     <td rowspan="3"> 
      <img src="circle.png" alt="header" class="rightHeaderImg" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
     <td> 
     </td> 
    </tr> 
</table>

這個問題似乎是與行跨度，但我認爲這是奇怪的，我有透明背景的PNG圖片，當它在運輸署表示其背景顏色爲固體。

來源

2013-01-08 unebune

您可以提供我們的CSS和附帶的代碼嗎？也許JSFiddle？我們不知道你提供的''''''''代碼是什麼...... – 2013-01-08 08:18:34

你在該表格行中有哪些純色？ –

你能提供一個鏈接到你的網站？如果問題出在特定的圖像上，我們希望能在提供解決方案之前先查看它。此外，您的tabel沒有右上角。 –

如果您希望圖像重疊在其下方的行，您可以通過使圖像溢出td而不是通過給td行劃分來溢出。

所以解決方案變得像這樣

<table style="background:purple; border-spacing:0; height:112px"> 
    <tr> 
    <td>top</td> 
    <td>top</td> 
    <td style="vertical-align:top"> 
     <div style="height:0;"><img src="circle.png" alt=""></div> 
    </td> 
    </tr> 
    <tr style="background:#999"> 
    <td>bottom</td> 
    <td>bottom</td> 
    <td><!--empty--></td> 
    </tr> 
</table>

，看起來像這樣

enter image description here

請注意，您需要一個額外的div與圖像的TD內，否則TD將擴大垂直方向與圖像一樣高（即使您明確將其高度設置爲0;這也無濟於事）。還要注意，你需要給表格一個明確的高度，否則它不會知道它需要如何適應溢出的圖像。

JSFiddle

來源

2013-01-08 16:00:06

今天晚些時候我會着手它，thx :) – unebune

好了，所以這就是我想要它做的事：

<table border="1"> 
    <tr style="background:purple;"> 
    <td>top</td> 
    <td>top</td> 
    <td rowspan="2"><img src="circle.png" alt="header"/></td> 
    </tr> 
    <tr style="background:#999"> 
    <td>bottom</td> 
    <!-- room for td above --> 
    <td>bottom</td> 
    </tr> 
</table>

我想以某種方式圓圖像具有其TD是透明的，所以兩者的顏色圖像後面顯示紫色tr和灰色tr。它不應該使用div和og定位的元素來解決。

enter image description here

來源

2013-01-09 07:24:44 unebune

我編輯了我的答案;它現在看起來如何？ –

Table rowspan透明圖片

回答

相關問題