《CSS揭秘》读书笔记-条纹背景

Posted 2022-08-26 博读代码

背景知识

颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);
指定背景图片大小：background-size: length|percentage|cover|contain;

难题

在网页设计和其他传统媒介中，各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。想要在网页中实现条纹图案，通常我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。如果我们可以直接在 CSS 中创建条纹图案，那该有多好啊！

解决方案

假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a（如图1-1）

图1-1

background: linear-gradient(#fb3, #58a);

现在，让我们试着把这两个色标拉近一点（参见图1-2）

图1-2

渐变现在出现在总高的 60% 区域，剩下的部分显示为实色，色标的位置用虚线标示出来了。

background: linear-gradient(#fb3 20%, #58a 80%);

现在容器顶部 20% 的区域被填充为 #fb3 实色，而底部 20% 区域被填充为 #58a 实色，真正的渐变只出现在容器 60% 的高度区域。

如果我们把两个色标继续拉近（分别改为 40% 和 60% ，参见图1-3），那真正的渐变区域就变得更窄了。

你是不是开始好奇，如果我们把两个色标重合在一起，会发生什么？

图1-3

渐变现在出现在总高的 20% 区域，剩下的部分显示为实色，色标的位置用虚线标示。

background: linear-gradient(#fb3 50%, #58a 50%);

图1-4

我们在图1-4 中可以看到，已经没有任何渐变效果了，只有两块实色，各占据了 background-image 一半的面积。

​

本质上，我们已经创建了两条巨大的水平条纹。因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸：

background: linear-gradient(#fb3 50%, #58a 50%);background-size: 100% 30px;

图1-5

在图 1-5 中可以看到，我们把这两条条纹的高度都缩小到了 15px 。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹。

我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值即可。

background: linear-gradient(#fb3 30%, #58a 30%);background-size: 100% 30px;

为了避免每次改动条纹宽度时都要修改两个数组，我们可以再次从规范那里找到捷径。

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置会被设置为它前面所有色标位置值的最大值。”

图1-6

这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就总会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。因此下面代码会产生跟图 1-6 一样的条纹背景。

如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代码可以生成三种颜色的水平条纹（参考图1-7）

background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

图1-7

以上就是本期使用 CSS 创建条纹背景的实践分享，希望对大家有帮助。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！