背景 - 单对角条纹

Question

我需要有一个 CSS 的背景作为附加的图像我不能让它与线性渐变一起工作。

我尝试了以下方法，但我无法只创建 1 个白色条纹。

div {
  background: #5cbcb0;
  background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 27%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 74.81%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 76.19%, #5cbcb0 100%);
  background-size: 593.97px 593.97px;
}

<div style="height: 200px;"></div>

Answer 1

尝试添加 no-repeat 如果这有助于检查代码段。

div {
   background: #5cbcb0;
   background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 30%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 100%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 100%, #5cbcb0 100%) no-repeat;
    background-size: 593.97px 593.97px;
}

<div style="height: 800px;"></div>

Answer 2

您只需为颜色提供正确的 start 和 stop 值。多个白色条纹的出现是由于在 73.81%.

之后使用了多个 #fff 值

div {
  background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
  /* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */
  background-size: 593.97px 593.97px;
  background-repeat: no-repeat; /* To avoid multiple instances */
}

<div style="height: 200px;"></div>

Answer 3

您可以像下面这样尝试。我以百分比定义大小，因此它会响应。

body {
  background: 
   linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/30% 80% no-repeat,
   #5cbcb0;
  margin:0;
  height:100vh;
}

如果您想要静态版本，只需使用像素值：

body {
  background: 
   linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/200px 200px no-repeat,
   #5cbcb0;
  margin:0;
  height:100vh;
}

Answer 4

小心CSS！

额外的条纹表示您不仅创建了 3 个形状，还创建了另一个形状。如果只想创建 3 个形状，则只需要 4 个值而不是更多。

所以这会起作用：

div {
  background: #5cbcb0;
  background: linear-gradient(120deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
  background-size: 593.97px 593.97px;
  background-repeat: no-repeat;
}

<div style="height: 200px;"></div>

所以你只需要 4 个值。是的，这是对最佳答案的重复，但这给出了这里实际发生的事情。因此，为避免出现多个实例，请使用 no-repeat 并且它会起作用，因为如果您删除它，它将显示多个实例，如果您尝试的话。此外，您可以删除 height: 200px 并将其移至 div class 以避免内联样式。它也适用于 135 度，因此 120 不是一个 "special" 数字，在这种情况下它是有效的。而且，您不希望它显示超过 1 个白色条纹，所以这就是我提出 background-repeat: no-repeat.

的原因

背景 - 单对角条纹

Background - single diagonal stripe

css

linear-gradients

css-shapes