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

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

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

最终，我想实现类似于this background here的功能。

通过使其他梯度与碳纤维背景叠加。

最佳答案

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

关于css - 如何做一个 "true"碳纤维CSS背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34556024/