如何做一个“真”的碳纤维CSS背景答案

【问题标题】：How to do a "true" carbon fiber CSS background如何做一个“真”的碳纤维CSS背景
【发布时间】：2016-01-01 12:13:24
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案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;
}

如果您需要该网站中效果的精确副本（渐变在左侧和右侧都逐渐变为黑色），则在现有渐变的顶部添加一个额外的图层，使其从黑色变为像下面的 sn-p 一样透明到黑色。

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;
}

【讨论】：

非常好，谢谢，请问是否有一种简单的方法可以在远离页面的静态距离处淡入黑色，有点像“反向阴影”？
正确是的，我相信您在上面说它将是一个单独的层？
谢谢你，我必须了解分层渐变！
实际上...我刚刚意识到将其放大后这不是真正的碳编织 - 例如这里：img.etradeasia.com/customer/237919/comm/upimage/… 如果你知道我的意思是双编织而不是单编织从图像的意思。
@user3481238：不，我不太明白你需要什么。此外，CSS 有其局限性，因此如果您想要一些过于复杂的东西，那么使用图像本身会更好。我并不是说任何你想要的都是不可能的，理解你想要什么并且知道渐变的人可以给你一个解决方案，但是超过一点 CSS 渐变来模仿图像会变得混乱。