如何使用css创建ANSI36和ANSI37图案填充

Question

我想用css创建两个阴影背景，看起来像这样(ANSI36和ANSI37)：

​

​

​

​

我认为这可以使用重复线性渐变，因为ANSI31 (见下文)是可以使用css的，但我不知道怎么做。请注意，我不能使用svg-pattern，因为必须将ANSI36指定给html-button的背景属性。此外，我不想使用预定义的图像，因为我想配置阴影的颜色。

​

​

ANSI31的CSS-code：

​

body {
  width: 100vw;
  height: 100vh;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      black 10px 20px
    );
}

​

我知道背景的大小，它总是一样的。有没有其他方法可以使用css或js动态绘制这种模式？

Answer 1

您可以使用简单地生成ANSI36 CSS代码。

​

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPUlEQVQoU43PQQoAMAgDweT/j7ZYUGoRo+dhicTujAtnAKjgRR6bYCIFy6quWEqh1casvrAt/cURxTMSOTyKNQgKOBqKWwAAAABJRU5ErkJggg==
) repeat;
}

​