css 紫色-css斜白色背景-线性渐变

话不多说，上图就是尊重

粘贴代码（html代码只是一个容器，没有写）

<code class="language-css">body{
  background: #243960;
}
.container{
  margin: 200px auto;
  width: 500px;
  height: 500px;
  background: linear-gradient(
        45deg, 
        rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%, 
        rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent
      );
  background-size: 50px 50px;
}

接下来一一分析：

边距、宽度和高度可以随意定义。 背景中有两个关键属性——线性渐变和背景大小。

先来线性梯度，分析它的属性，一共有9个属性

45deg加上8个颜色值后面是比例。

45deg代表白色倾斜角度，很容易理解。 如果不加这个属性，就变成水平的白色，所以90deg是垂直的网格，可以形成粉红色的网格。

分析前8个属性，得出结论是由rgba颜色值和透明加比例组成。

rgba颜色值是白色的颜色，虽然透明也是一种颜色css 紫色，但是它是继承自parent的，而这里的parent颜色就是body的背景色（在这段代码中，可以理解为无色透明≈ rgba(0,0 ,0,0))。

比例也比较容易理解，但是需要串联起来看：

0-25% 是 条纹色
25%-50% 是 父级颜色
50%-75% 是 条纹色
75%-100% 是 父级颜色

这里的细节是，最后一次透明后的缺失比例显然表示透明1，即100%。 注意：如果不写angle属性，则从顶部开始渲染，如果写0deg，则从底部开始，角度值减少多少，渲染起点顺时针旋转多少。

接下来，就说得通了。 按照这个逻辑，我们渲染的图片应该是这样的

怎么看起来像第一张图？ 其实关键点在于前面的属性background-size，以及默认值为repeat的background-repeat。

使用背景大小：50px 50px； 将上图的样式缩小为50*50的方形条纹。 那么500*500的容器就很难装满了。 另外css 紫色，background-repeat的默认重复也发挥了作用，渲染出来的50*50网格图块在500*500容器上重复渲染。 就成了第一张图的疗效。

知道了各个属性的作用，扩展起来就方便多了。 如果想改变斜白腰线的大小，只需要改变background-size的大小即可。 颜色不一定是rgba格式，如果要做二色白色，只需要将透明改成其他颜色即可。三色横条纹也简单

50% ÷ 3 ≈ 16.66%

所以代码是：

.container{
  margin: 200px auto;
  width: 500px;
  height: 500px;
  background: linear-gradient(
        45deg, 
        red 0, red 16.66%, #fff000 16.66%, #fff000 33.33%, rgb(0, 0, 255) 33.33%, rgb(0, 0, 255) 50%,
        red 50%, red 66.66%, #fff000 66.66%, #fff000 83.33%, rgb(0, 0, 255) 83.33%, rgb(0, 0, 255)
      );
  background-size: 50px 50px;
}

效果太辣眼睛不粘。

关于斜白暂时就这些了，后期如果有更多有趣的事情我们会继续更新