Html 在表格行中居中显示图像背景_Html_Css_Image_Background_Html Table

Html 在表格行中居中显示图像背景

html css image

Html 在表格行中居中显示图像背景,html,css,image,background,html-table,Html,Css,Image,Background,Html Table,我想在一个表格行的背景中放置一个图像，并将其居中在我的项目中，我尝试了以下所有可能的组合：背景位置背景来源背景尺寸等等但我一直在用一个不居中、拉伸、不可见的图像我使用轻量级测试应用程序设置了一个plunker，其中图像甚至不可见 index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link

我想在一个表格行的背景中放置一个图像，并将其居中

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

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

但我一直在用一个不居中、拉伸、不可见的图像

我使用轻量级测试应用程序设置了一个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>

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

尝试以下方法：

$（document）.on（'dblclick'，'tr'，function（）{
$（this.find（'td'）.eq（1）.toggleClass（'loading'）；
});
正文{
背景色：#F4；
}
.装货{
背景：url（'https://s9.postimg.org/7lhi0igcv/dotline.gif');
背景位置：中心；
背景重复：无重复；
}

第1列
第2列
第3列
瓦尔1
瓦尔2
val3
瓦尔1
瓦尔2
val3
瓦尔1
瓦尔2
val3
您需要tr或表格中心的背景图像吗？在tr上，我将使用它，当用户双击它时，在单行上显示预加载程序。当您双击图像时，将加载这就是您正在查看的内容吗@尼古拉斯·普雷托特是的，这正是我要找的。然而，这很奇怪，因为在我的项目中：背景没有显示。我将上传一个带有我项目部分的plunker OK你可以通过点击勾号和upvote接受答案。很高兴帮助@Nicolas Pretot。
body {
  background-color: #f4f4f4;
}

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