html中背景条纹效果,css 条纹背景效果

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

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);