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

Question

我想使用如下所示的 css(ANSI36 和 ANSI37)创建两个阴影背景:

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

ANSI31 的 CSS 代码:

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

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

Answer 1

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

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