如何制作 "true" 碳纤维 CSS 背景

Question

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

examples by Lea Verou不是真正的碳纤维，希望你知道"true"碳纤维是什么样子的！

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

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

Answer 1

可以使用与 Lea Verou 使用的方法相同的方法来实现类似于链接网站中的渐变模式（他们使用图像作为背景）。通过添加一个额外的 linear-gradient 图像作为 bottom-most 层并使其从较暗的黑色阴影变为较浅的阴影，我们可以获得与该网站相同的效果。

注意：该网站还在顶部使用了另一层来模糊两端，但我认为您只是在寻找互锁图案。这个额外的层（如果需要）也可以使用 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;
}

如何制作 "true" 碳纤维 CSS 背景

How to do a "true" carbon fiber CSS background

css

linear-gradients