Question

我正在尝试仅更改表的一部分的背景图像，特别是前两个td元素，而使第三个元素保持不变。我试过将前两个td包装在div中，并更改div的背景图片，但这没用。

我在网站上的其他地方四处逛逛，但似乎找不到类似的问题。这是我的代码：

<div height='200px' width='600px'>
  <table width='100%' style='display: inline-block; float: left; border-collapse: collapse; background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
    <tr>
      <td width='33%' style='vertical-align: top; padding: 20px'><img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge"> </td>
      <td align='left' width='33%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">GLORIES OF GREECE<br><br><br>
        <font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;"> 8 days <br>
          <div align='center'> <button> EXPLORE NOW </button> </div>
        </font>
      </td>
      <td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
    </tr>
  </table>
</div>

Answer 1

将两个tds包装到表格中，然后将背景应用于表格。

Codepen demo。

<div height='200px' width='600px'>
    <table width='100%' style='display: inline-block; float: left; border-collapse: collapse;'>
        <tr>
            <td width='66%' style='background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
                <table width='100%'>
                    <tr>
                        <td width="50%" style="vertical-align: top; padding: 20px;">
                            <img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge">
                        </td>
                        <td align='left' width='50%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">
                            GLORIES OF GREECE
                            <br>
                            <br>
                            <br>
                            <font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;">
                                8 days <br>
                                <div align='center'> <button> EXPLORE NOW </button> </div>
                            </font>
                        </td>
                    </tr>
                </table>
            </td>
            <td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
        </tr>
    </table>
</div>

仅更改表格的一部分的背景图像

1 个答案: