在表格行中居中图像背景答案

【问题标题】：Center image background in table row在表格行中居中图像背景
【发布时间】：2017-11-26 18:29:51
【问题描述】：

我想把一张图片放在一个表格行的背景中，我想把它居中。

在我的项目中，我尝试了所有可能的组合：

背景位置
背景来源
背景尺寸
等等等等

但我一直使用非居中、拉伸、不可见的图像。

我用一个轻量级的测试应用程序设置了一个 plunker，其中图像甚至不可见....：

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  </head>

  <body>
    <table class="table bordered">
      <thead>
        <tr>
          <th>col 1</th>
          <th>col 2</th>
          <th>col 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="loading">
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
        <tr>
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
        <tr>
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

style.css

/* 样式放在这里 */

body {
  background-color: #f4f4f4;
}

.loading {
  background: url('https://s9.postimg.org/7lhi0igcv/dotline.gif');
}

如果您知道如何在行的中心显示此图像，而不是拉伸，并且将背景颜色作为页面的其余部分，这将是一个很大的帮助。

【问题讨论】：

您需要将背景图片放在桌子的 tr 或中心吗？
在 tr 上，我将使用它，当用户双击它时在单行上显示一个预加载器

标签： html css image background html-table

【解决方案1】：

试试这个：

$(document).on('dblclick','tr',function(){
$(this).find('td').eq(1).toggleClass('loading');
});

body {
  background-color: #f4f4f4;
}

.loading {
  background: url('https://s9.postimg.org/7lhi0igcv/dotline.gif');
  background-position:center;
  background-repeat:no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>



    <table class="table bordered">
      <thead>
        <tr>
          <th>col 1</th>
          <th>col 2</th>
          <th>col 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
        <tr>
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
        <tr>
          <td>val1</td>
          <td>val2</td>
          <td>val3</td>
        </tr>
      </tbody>
    </table>

【讨论】：

当你双击图片时会加载
这就是你要找的？ @尼古拉斯·普雷托
是的，这正是我正在寻找的。然而这很奇怪，因为在我的项目中：背景没有显示。我将用我的项目的一部分上传一个 plunker
好的，您可以通过单击对勾和upvote 来接受答案。很高兴帮助@Nicolas Pretot。