CSS/gradient

[canvascat]

在 JavaScript 中为什么0.1 + 0.2 = 0.30000000000000004？也许这个网站能给你答案。

所以我们来说说这个网站中纸张样式背后的点状背景是怎么实现的。

首先找到元素，可以很容易的找到是一个伪类元素实现的背景。

.intro .section__content::after {
  content: '';
  position: absolute;
  top: 3rem;
  right: -3rem;
  bottom: -3rem;
  left: 3rem;
  z-index: -1;
  opacity: 0.6;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      #fff 2px,
      #fff 10px
    ), repeating-linear-gradient(-90deg, #000, #000 2px, #fff 2px, #fff 10px);
}

显然实现背景的是background属性，那repeating-linear-gradient又是什么呢？就字面意思来看就是 重复线性渐变。

CSS 函数 repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的<image> 。它类似于 radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 <gradient> 数据类型的对象，是一种特殊的<image>类型。

首先看一下 MDN 是怎么描述的：

很复杂是不是？第一个参数是定义轮廓、尺寸和结束形状的位置，之后的就是色标列表。一般情况下使用较多的是定义位置，像上述的例子使用的就是angle，即渐变轴的角度，且角度顺时针增加。

那么repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 10px)就表示 0-2px 区域为透明，2-10px 区域为白色。
下面这段样式的效果为：

div {
  height: 300px;
  width: 300px;
  border: 1px solid red;
  background-color: #000;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    #fff 2px,
    #fff 10px
  );
}

可以得出结论，0deg 的初始位置为顶部，如果调整一下角度可以发现默认旋转的原点为左下角。

同理可以得出repeating-linear-gradient(-90deg, #000, #000 2px, #fff 2px, #fff 10px)绘制的竖向的 2px 宽度黑色直线，中间夹杂 8px 宽度的白色。

第一张会置于顶层，最后就可以得到 2px 宽度的黑色方块，其余区域由白色填充。但是最开始的例子上半部背景是蓝色的，这又是怎么实现的呢？接下来再看看 mix-blend-mode: multiply;。mix-blend-mode 字面意思 混合模式，玩过 Photoshop 之类软件的应该会比较熟悉，multiply 就是相乘，通俗来讲就是 PS 中的 正片叠底， 即 最终颜色为顶层颜色与底层颜色相乘（A*B/255）的结果。如果叠加黑色层，则最终层必为黑色层（A*0/255=0），叠加白色层不会造成变化（A*255/255=A）。

其他混合模式可以查看文档 blend-mode。

参考，顺便复习一下 Photoshop：

PS 中图层的混合模式

由于 mix-blend-mode: multiply; 的作用，白色区域就不会覆盖下层的其他颜色了，最后就显示出了点状效果。