css 条纹背景效果

条纹背景是基于渐变背景。

<div class="bg"></div>

CSS 代码

.bg{
  height: 100px;
  width: 200px;
  background: linear-gradient(#fb3,#58a);
}

将这两个色标拉近：

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

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

如果两个颜色都设为50%，就得到了两块均分div背景地实色。

因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸。

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

由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹。

也可以创建不等宽条纹：

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

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，

则该色标的位置值会被设置为它前面所有色标位置值的最大值。

这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值

我们可以将上面地代码改成:

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

如果要创建多色条纹：

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

以上关于css 条纹背景效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。