jquery - 背景图像如何适合单元格表(允许扭曲)

Question

我尝试将背景和交叉图像放入单元格表中。图像允许扭曲但不重复。当浏览器展开时，图像也必须展开，否则。

我尝试了很多组合。将背景大小设置为覆盖或包含但仍然无效。

.selected {
  background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png");
  background-size: contain;
  background-repeat: no-repeat;
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<div class="w3-container w3-row">
  <table class="w3-table">
    <tr>
      <td class="selected"></td>
      <td class="selected"></td>
      <td class="selected"></td>
      <td class="selected"></td>
    </tr>
  </table>
</div>

希望大家帮帮忙。谢谢。

Answer 1

使用 background-size:100% 100%; 这对你有帮助

.selected {
  background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png");
  background-repeat: no-repeat;
  background-size:100% 100%;
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<div class="w3-container w3-row">
  <table class="w3-table">
    <tr>
      <td class="selected"></td>
      <td class="selected"></td>
      <td class="selected"></td>
      <td class="selected"></td>
    </tr>
  </table>
</div>