为什么我不能在tbody上设置背景图像?

时间:2015-10-23 11:05:02

标签: html css

这是页面(我尝试加载的图像位于同一文件夹中,我将html加载为本地文件):

<html>
  <head>
    <meta charset="UTF-8">
    <title>Bingo Card Generator</title>
    <style type="text/css">
      label,input, select {
        display:block;
      }
      input,select {
        margin-bottom:.5em;
      }
      legend { font-weight: bold }
      div.clear { clear:both; }
      div.break { clear:both; page-break-after:always; break-after:always; }
      table {
        background-color:black;
        border-collapse:collapse;
        margin-bottom:1em;
        margin-right:1em;
        float:left;
      }
      tr {
        display: block;
      }
      tbody {
        background: url('frozen1.png'); 
      }
      td, th {
        border:1px solid black;
        text-align:center;
        display: inline-block;
      }
      th {
        color:white;
        height:50px;
        font-family:Arial,Helvetica;
        font-size:24px;
      }
      td {
        width:85px;
        height:85px;
      }
      .freespace {
        font-size:smaller;
      }
      #footer {
        border-top:1px solid #ccc;
        clear:both;
      }
    </style>
    <style type="text/css" media="print">
      h1, form, #footer { display:none }
    </style>
  </head>
  <body>
    <h1>Make your own bingo cards</h1>
    <div id="results">
      <table>
        <thead>
          <tr>
            <th colspan="5">BINGO</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>28</td>
            <td>37</td>
            <td>20</td>
            <td>45</td>
            <td>15</td>
          </tr>
          <tr>
            <td>42</td>
            <td>16</td>
            <td>26</td>
            <td>49</td>
            <td>48</td>
          </tr>
          <tr>
            <td>31</td>
            <td>50</td>
            <td>
              <strong>
                *
              </strong>
            </td>
            <td>19</td>
            <td>21</td>
          </tr>
          <tr>
            <td>22</td>
            <td>6</td>
            <td>41</td>
            <td>24</td>
            <td>23</td>
          </tr>
          <tr>
            <td>32</td>
            <td>14</td>
            <td>29</td>
            <td>8</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>

    </div>
  </body>
</html>

1 个答案:

答案 0 :(得分:4)

您需要从background-color: white;

中删除td

JSFiddle