Question

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

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

如果我通过1em

向右移动一个background-position-x: 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到{{1将是另一个瓷砖，依此类推。这就是为什么你看到第一个瓷砖的最后32em（红色）和第二个瓷砖的其余部分（1em * 5）作为容器中的背景图像的原因。

我在here提供的答案中讨论了将背景渐变图像的大小视为6em的原因。

您的问题的解决方案是明确地将X轴中的31em设置为等于您的实际渐变大小。

＆＃13;

background-size

＆＃13;

.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;
}

＆＃13;

此外，请注意<div class="foo"> <div class="bar"> </div> </div> <div class="foo2"> <div class="bar"> </div> </div>和background-position-x最初是针对CSS3提出的（并被拒绝）。它是now approved for Level 4但是为了支持旧浏览器，最好使用如下所示的速记属性。我刚刚验证了一些较旧的Firefox版本不支持background-position-y。

background-position-x

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

1 个答案: