CSS背景条带1px白色，其余透明答案

【问题标题】：CSS background stripes with 1px white, the rest transparentCSS背景条带1px白色，其余透明
【发布时间】：2018-02-23 13:08:24
【问题描述】：

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

我现在的代码是：

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

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

【问题讨论】：

标签： css css-gradients

【解决方案1】：

要获得准确的像素尺寸，您可以使用像素而不是百分比：

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

&lt;div class="stripes"&gt;&lt;/div&gt;

【讨论】：

由于某种原因，此代码导致行上出现小白点。
是的，那是因为 -75deg 和 1px。尝试 45 度或不同数量的像素，它会有所不同。我将进行另一个实验，看看我是否可以摆脱这些，如果成功则更新答案。
这肯定与浏览器呈现它的方式有关。如果您使用 2px 而不是 1，则可以解决问题。这只是您希望线条有多粗和角度的问题。
太棒了！我添加了第三个选项 - 它略微模糊了线条，但消除了亮点并且比 2px 更薄。