如何使用 repeating-linear-gradient() 移动背景

Question

我用文字解释有点复杂，所以请看

table {
  border-collapse: collapse;
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

#t1 td.locked {
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}


/**
 *  I have no success with this   
 */

#t1 td.locked:nth-child(odd) {
  background-position-y: 0px;
}

#t2 td {
  width: 45px;
  height: 25px;
}

#t2 td.locked {
  background: repeating-linear-gradient(-49deg, transparent, transparent 9px, #00000035 9px, #00000035 18px);
}

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>



<table id="t2">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>

有两个 table 单元格有条纹背景。

#t2 中的条纹单元格几乎是我想要的：相邻单元格中的条纹几乎重合，看起来它们被绘制在整列（或几列）上。

但我不喜欢我是如何做到这一点的：通过调整单元格大小和条纹宽度和角度。

是否可以通过某种方式 "move" 条纹背景实现与 #t1 table 相似的外观？并且不改变条纹宽度和角度以及单元格大小吗？

Answer 1

您可以将渐变应用于整个 table，并将白色背景应用于不需要渐变的单元格。

table {
  border-collapse: collapse;
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

td:not(.locked) {
  background:#fff;
}
#t2 td {
  width: 45px;
  height: 25px;
}

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>



<table id="t2">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>

Answer 2

您需要为背景设置一个共同的参考点。

这个需要的样式是

background-attachment: fixed

table {
  border-collapse: collapse;
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

#t1 td.locked {
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
  background-attachment: fixed; /* added */
}

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>

如何使用 repeating-linear-gradient() 移动背景

How to move backgroung with repeating-linear-gradient()

css

linear-gradients

css-tables