条纹背景

css线性渐变
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

水平条纹：

body{
            background: linear-gradient(#fb3 30%,#58a 0,#58a 66.6%,yellow 0);
            background-size: 100% 45px;
        }

默认重复平铺

垂直条纹：

body{
            background: linear-gradient(to right,#fb3 50%,#58a 0);
            background-size: 30px 100%;
        }

垂直条纹

斜向条纹：

body{
            background: linear-gradient(45deg,#fb3 50%,#58a 0);
            background-size: 30px 30px;
        }

首次尝试失败

以上，只是把每个“贴片”的内部渐变旋转了45°，而不是把整个重复的背景都旋转了。

        body{
            background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
            background-size: 30px 30px;
        }

单个贴片中应包含4条条纹

但是，得到的条纹看起来比之前的水平或垂直条纹细一些，是因为现在的间距是旋转之前等腰直角三角形的直角边，事实上我们需要的是它的斜边，因此应该是直角边的√2倍，它不是整数只能为近似值42.426406871 px，略略略，其实写成42px就差不多了。

这样看上去就差不多了

更好的斜向条纹：
repeating-linear-gradient()

        body{
            background: repeating-linear-gradient(45deg,
                        #fb3 0,#fb3 25%,#58a 0,#58a 50%);
            background-size: 42.43px 42.43px;
        }

灵活的同色系条纹
可以把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹

        body{
            background: #58a;
            background-image: repeating-linear-gradient(30deg,
                hsla(0,0%,100%,.1),
                hsla(0,0%,100%,.1) 15px,
                transparent 0,transparent 30px);
        }