CSS 背景条纹为 1px 白色,其余为透明

CSS background stripes with 1px white, the rest transparent

我已经阅读了 CSS 背景条纹教程,但我似乎没有找到解决此问题的方法。如果我想要只有 1px 宽的对角线白线与大约 10px 宽的透明条纹交替出现怎么办?像这样:

我现在的代码是:

.stripes {
    background: repeating-linear-gradient(
      45deg,
      transparent 46%, #fff 49%, #fff 51%, transparent 55%
    );
    width: 180px;
    height: 56px;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
}

但这会产生模糊的粗白线。我是这个概念的新手。

要获得精确的像素尺寸,您可以使用像素而不是百分比:

body {
    background: #222;
}

.stripes {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 1px, /* Transparent beginning at pixel 1 */
      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */
    );
    width: 180px;
    height: 56px;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
}

.stripes2px {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 2px,  /* White, continuing to pixel 2 */
      transparent 2px, /* Transparent beginning at pixel 2 */
      transparent 12px /* Transparent ending at pixel 14 (12 + 2) */
    );
    top: 56px;
}

.stripes-fade {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 2px, /* Transparent beginning at pixel 2 */
      transparent 10px /* Transparent ending at pixel 12 (10 + 2) */
    );
    top: 112px;
}
<div class="stripes"></div>
<div class="stripes stripes2px"></div>
<div class="stripes stripes-fade"></div>

另一种方法,但给出相同的结果。与浏览器呈现方式有关(无抗锯齿):

body {
    background: #222;
}

.stripes {
    width: 180px;
    height: 56px;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.stripes:before {
    content: '';
    display: block;
    background: repeating-linear-gradient(
      0deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 1px, /* Transparent beginning at pixel 1 */
      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */
    );
    position: absolute;
    /* Just a bunch of random numbers to get it to cover - no thought went into these. */
    top: -100%;
    left: -200%;
    width: 400%;
    height: 1000%;
    transform: rotate(-75deg);
}
<div class="stripes"></div>