如何做一个"真正的"碳纤维CSS背景

真正的碳纤维是一系列互锁的灰色纤维,看起来像灰色的编织床单.有谁知道如何在CSS中创建这样的模式？

Lea Verou的例子不是真正的碳纤维,希望你知道什么是"真正的"碳纤维!

最终我想在这里实现与此背景类似的东西.

通过进一步叠加碳纤维背景的梯度.

可以使用Lea Verou使用的相同方法实现类似于链接网站中存在的梯度模式(它们使用图像作为背景).通过添加额外的linear-gradient图像作为最底层,并使其从较暗的黑色阴影到较浅的阴影,我们可以获得与该网站相同的效果.

注意:该网站还在顶部使用另一层来模糊两端,但我认为您只是在寻找互锁模式.这个额外的层(如果需要)也可以使用CSS添加.

body {
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
}