CSS渐变对角线条纹背景错位

Question

我已经基于Bootstrap LESS mixin创建了一个SCSS mixin，它将创建一个对角条纹的背景。然而，无论我为条纹做出多大的“瓦片”，总会出现1px的错误对齐。我猜它与子像素计算有关，但我想知道是否有人可以指出我正确的方向。

http://codepen.io/allicarn/pen/ncHod

以下是codepen（Chrome）的屏幕截图，其中重复突出显示了背景。基本上，1px工件源于任何一个边缘不匹配到下一个“瓦片”

另一个目标是修改角度并使其有效，但这只是奖励积分;）

Answer 1

不确定旧版浏览器的支持，但更简单的解决方案是

background-image: repeating-linear-gradient(45deg, gray 0px, gray 25px, transparent 25px, transparent 50px, gray 50px);

无论如何，我可以在像素级别看到静止的伪像

至少这样你可以获得任何角度的奖金......

此外，通过增加正文的大小来查看codepen 似乎：

body {
    @include diagonalStripes(#aaa, 50px);
    height: 1000px;
}

updated codepen

如果是这种情况，这意味着问题是由于背景延伸到元素之外？

Answer 2

这是另一种用于斜条纹背景的LESS mixin：

.stripes(@angle: -45deg, @color: rgba(0, 0, 0, 1), @size: 4px /* size must be an even number */) {
  background-image: -webkit-repeating-linear-gradient(@angle, @color, @color 25%, transparent 25%, transparent 50%, @color 50%);
  background-image: -moz-repeating-linear-gradient(@angle, @color, @color 25%, transparent 25%, transparent 50%, @color 50%);
  background-image: -ms-repeating-linear-gradient(@angle, @color, @color 25%, transparent 25%, transparent 50%, @color 50%);
  background-image: -o-repeating-linear-gradient(@angle, @color, @color 25%, transparent 25%, transparent 50%, @color 50%);
  background-image: repeating-linear-gradient(@angle, @color, @color 25%, transparent 25%, transparent 50%, @color 50%);

  .background-size(@size @size);
}

希望它有所帮助...