html中背景条纹效果,使用CSS线性渐变 制作条纹背景

主要使用的属性 linear-gradient

background:linear-gradient(#000,#ccc);

Paste_Image.png

取消中间的渐变过度

background:linear-gradient(#000 50%,#ccc 50%);

Paste_Image.png

如果多个色标具有相同的位置值(就是颜色后面跟的百分比),他们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值，从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程

通过background-size来调整尺寸

background:linear-gradient(#000 50%,#ccc 50%);

background-size:100% 30px;

Paste_Image.png

应为背景色默认是repeat的，所以会出现斑马条纹

不等宽条纹

background:linear-gradient(#000 30%,#ccc 30%);