表格背景圖片顯示在表格前

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>

希望它能幫助。乾杯!