时间戳

首页 > 解决方案 > 背景 - 单斜条纹

css - 背景 - 单斜条纹

问题描述

我需要有一个带有 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>

标签： csscss-shapeslinear-gradients

解决方案

您只需要为颜色提供正确start的stop值。多条白色条纹的出现是由于之后使用的多个#fff值73.81%。

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>

推荐阅读