Question

我希望我的背景图像完全适用于表格边框，但它并不真正起作用，它只适用于表格边框的中心。

如果没有

，它就无法运作

border-collapse：separate;

所以我不知道还能做什么。是的，我是CSS和HTML初学者。

＆＃13;

tbody {
  color: black;
}
th {
  color: black;
}

h1 {
  color: black;
}

.table, .table-bordered{
  border-spacing: 4px;
  border-collapse: separate;
  background-image: url('http://fs5.directupload.net/images/170604/sahdx5gv.png');
  background-size: 100% auto;
  background-repeat: repeat;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border: none;
  background-color: #fff;
}


Heres my HTML CODE:

＆＃13;

<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<head>
<link rel="stylesheet" href="shitfuck.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
  <h1 class="text-center">OpSec Leaderboard</h1>
  <table class="table table-bordered"></br>
    <thead>

      <tr>

        <th>Place</th>
        <th>Username</th>
        <th>Rank</th>
        <th>Points</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
      <tr>
        <td>2</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
      <tr>
        <td>3</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

＆＃13;

Answer 1

您只需要纯色背景，因此请删除背景图片属性，只需使用background-color: blue;或background: blue;即可。

tbody {
  color: black;
}
th {
  color: black;
}

h1 {
  color: black;
}

.table, .table-bordered{
  border-spacing: 4px;
  border-collapse: separate;
  /*
  background-image: url('http://fs5.directupload.net/images/170604/sahdx5gv.png');
  background-size: cover;
  background-repeat: repeat;
  background-position: center center;
  */
  background: blue;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border: none;
  background-color: #fff;
}


Heres my HTML CODE:

<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<head>
<link rel="stylesheet" href="shitfuck.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
  <h1 class="text-center">OpSec Leaderboard</h1>
  <table class="table table-bordered"></br>
    <thead>

      <tr>

        <th>Place</th>
        <th>Username</th>
        <th>Rank</th>
        <th>Points</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
      <tr>
        <td>2</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
      <tr>
        <td>3</td>
        <td>username</td>
        <td>rank</td>
        <td>1337</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

背景图像并非完全适用

1 个答案: