如何独立于容器宽度移动背景渐变

Question

我有一个线性渐变：2em red, 4em yellow

.bar {
    background: repeating-linear-gradient(90deg, red 0, red 2em, yellow 2em, yellow 6em);
    background-position-x: 0em;
}

如果我通过 background-position-x: 1em;

向右移动渐变一 1em

我希望我的渐变将从 1em yellow 块和 2em red 块开始。

相反，它会抓取 div 末尾的前一个最后一个块，它是红色的。所以我得到 3em red, 4em yellow，这违反了我的规则。

这是一个演示： http://codepen.io/anon/pen/XXmOPB?editors=110

Answer 1

重复渐变具有循环重复，因此如果不添加明确的 background-size 设置，您必须将其视为 31em 的图块一个接一个地放置。所以当背景在 x 轴的位置设置为 1em 时，它有点像 -30em 到 1em 是一个图块，1em 到 32em 将是另一个瓷砖等等。这就是为什么您看到第一个图块的最后 1em（红色）和第二个图块的其余部分（6em * 5）作为容器内的背景图像的原因。

背景渐变图片尺寸取31em的原因在我提供的答案中讨论过。

您的问题的解决方案是将 X 轴中的 background-size 显式设置为等于您的实际渐变大小。

.foo div.bar {
  width: 31em;
  height: 2em;
}
.foo2 div.bar {
  width: 33em;
  height: 2em;
}
.bar {
  background: repeating-linear-gradient(90deg, red 0, red 2em, yellow 2em, yellow 6em);
  background-size: 6em 100%;
  background-position-x: 1em;
}

/* Just for demo */
div {
  margin: 10px;
}

<div class="foo">
  <div class="bar">
  </div>
</div>
<div class="foo2">
  <div class="bar">
  </div>
</div>

此外，请注意 background-position-x 和 background-position-y 最初是为 CSS3 提出的（但被拒绝了）。它是 now approved for Level 4 但为了支持旧浏览器也最好使用 shorthand 属性如下所示。我刚刚验证了一些旧的 Firefox 版本不支持 background-position-x.

background-position: 1em 0em;

如何独立于容器宽度移动背景渐变

How to move background gradient independent from container width

css

linear-gradients