背景图像无缝对齐？

Question

我想通过在表格中添加阴影图案来突出显示表格中的某些单元格。

如果具有相同图案的两个单元格彼此相邻，则图案应无缝覆盖两个单元格。此 codepen 显示了问题：https://codepen.io/Carsten-Fuchs/pen/LYodKxv

详细信息取决于预览区域的大小，因此您可能需要放大或缩小浏览器窗口才能看到问题。这是四个细胞相遇的地方的放大屏幕截图，演示了这个问题：

本题期望的结果和目标是：

已经尝试过：

使用
```
background-attachment: fixed;
```
似乎可以解决问题，但是随后背景图像被固定在视口的原点，即它停止随着表格滚动。
将背景图像应用于
```
<table>
```
元素没有帮助，因为它覆盖了所有单元格，而不仅仅是单独选择的单元格。

因此，问题是如何实现相同的无缝对齐，但将原点固定到

<body>

、

<table>

元素或其他任何元素，以便阴影线与页面内容的其余部分一起滚动。

Answer 1

这是一个合适的解决方案。

Add background-position: center bottom;

table.demo {
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table.demo td {
  height: 100px;
}

table.demo td.stripes {
  /* Using  background-attachment: fixed;  is _not_ the desired solution, because the background no longer scrolls alogn with the table. */
  /* background-attachment: fixed; */

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
  background-position: center bottom;
}

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }

<table class="demo">
      <tr>
        <td class="stripes A">A</td>
        <td class="stripes B">B</td>
        <td class="stripes C">C</td>
      </tr>
      <tr>
        <td class="stripes D">D</td>
        <td class="stripes E">E</td>
        <td class="stripes F">F</td>
      </tr>
      <tr>
        <td class="stripes G">G</td>
        <td>H</td>
        <td class="stripes I">I</td>
      </tr>
    </table>

谢谢你。

背景图像无缝对齐？

问题描述投票：0回答：1

1个回答

最新问题

背景图像无缝对齐？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1