css - 如何做一个 "true"碳纤维CSS背景

Question

真正的碳纤维是一系列互锁的灰色纤维，它们看起来像灰色的编织布。请问有人知道如何在 CSS 中创建这样的模式吗？

examples by Lea Verou不是真正的碳纤维，希望你知道“真正的”碳纤维长什么样!

最终我想实现类似于 this background here 的东西.

通过在碳纤维背景上叠加更多梯度。

Answer 1

可以使用与 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;
}

---

如果您需要该网站中效果的精确复制品(其中渐变在左侧和右侧逐渐变为黑色)，请在现有渐变之上添加一个额外的层，并使其从黑色变为透明到黑色，如下面的代码片段所示。

body {
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)), 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: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
}