html - 显示在 table 前面的 table 背景图片

Question

在我的表格中添加背景图像后，图像显示在表格上方，表格的内容被隐藏。为什么是这样？ HTML 和 CSS 代码如下:

.muscles_worked {
  background-image: url(images/dumbbell.png);
  border: 1px dashed black;
  margin: 0 auto;
  margin-top: 50px;
}

<table class="muscles_worked">
  <caption>Muscles Worked in this Program</caption>
  <thead>
    <tr>
      <th>Part of Body</th>
      <th>Day(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Legs</td>
      <td>Monday</td>
    </tr>
    <tr>
      <td>Friday</td>
    </tr>
    <tr>
      <td rowspan="3">Core</td>
      <td>Monday</td>
    </tr>
    <tr>
      <td>Thursday</td>
    </tr>
    <tr>
      <td>Friday</td>
    </tr>
  </tbody>
</table>

Answer 1

更好的方法可能是在 div 中设置表格并在其上设置背景。

div.muscles_worked {
  background-image: url('http://placekitten.com/700/500?image=13');
  margin: 0 auto;
  margin-top: 50px;
  display: inline-block;
}
.muscles_worked > table {
  border: 1px dashed black;
}

<div class="muscles_worked">
  <table>
    <caption>Muscles Worked in this Program</caption>
    <thead>
      <tr>
        <th>Part of Body</th>
        <th>Day(s)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Legs</td>
        <td>Monday</td>
      </tr>
      <tr>
        <td>Friday</td>
      </tr>
      <tr>
        <td rowspan="3">Core</td>
        <td>Monday</td>
      </tr>
      <tr>
        <td>Thursday</td>
      </tr>
      <tr>
        <td>Friday</td>
      </tr>
    </tbody>
  </table>
</div>

希望对您有所帮助。干杯!