真正的碳纤维是一系列互锁的灰色纤维,看起来像灰色的编织床单.有谁知道如何在CSS中创建这样的模式？
examples by Lea Verou不是真正的碳纤维,希望你知道什么是“真正的”碳纤维！
最终我想要实现类似于this background here的东西.
通过进一步叠加碳纤维背景的梯度.
解决方法
可以使用Lea Verou使用的相同方法实现类似于链接网站中存在的梯度模式(它们使用图像作为背景).
通过添加额外的线性渐变图像作为最底层,并使其从较暗的黑色阴影到较浅的阴影,我们可以获得与该网站相同的效果.
通过添加额外的线性渐变图像作为最底层,并使其从较暗的黑色阴影到较浅的阴影,我们可以获得与该网站相同的效果.
注意：该网站还在顶部使用另一层来模糊两端,但我认为您只是在寻找互锁模式.这个额外的层(如果需要)也可以使用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,linear-gradient(to bottom,rgb(8,8,8),rgb(32,32));
background-size: 10px 10px,10px 10px,10px 5px;
background-position: 0px 0px,5px 5px,0px 0px;
}
如果您需要该网站中效果的精确副本(渐变在左侧和右侧渐变为黑色),则在现有渐变的顶部添加一个额外的图层,使其从黑色变为透明变为黑色比如下面的代码片段.
body {
background-color: rgb(32,32);
background-image: linear-gradient(to right,rgba(0,1),0) 20%,0) 80%,1)),32));
background-size: 100% 100%,0px 0px,0px 0px;
}
