桌子前面显示的桌子背景图像

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> 

希望能帮助到你。 干杯!