Question

我想在一个表行的背景中放置一个图像，我想将它放在中心位置。

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

背景位置
背景原产
背景大小
等等

但我总是带着一个非中心，拉伸，不可见的图像。

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

的index.html

3.method(:+).curry[3] == 6

的style.css

/ *样式到这里* /

<!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>

如果你知道如何在我的行的中心显示这个图像，而不是拉伸，并且背景颜色与页面的其余部分一样，那将是一个很好的帮助。

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在桌行的中心图象背景

1 个答案: