css - CSS渐变对角条纹背景错位

Question

我创建了一个基于 Bootstrap LESS 混合的 SCSS 混合，它将创建一个斜条纹背景。然而，无论我为条纹制作多大的“平铺”，似乎总是有 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;
}

更新的代码笔

如果是这种情况，这是否意味着问题来自超出元素的背景？

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

希望能帮助到你...