表格背景图像显示在表格前

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中设置表并在其上设置背景。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。干杯！