本文链接：https://blog.csdn.net/qq_41257129/article/details/100630568

前面的话

如何使用css创建条纹背景？这篇文章介绍如何使用css3新增知识点 ———— 线性渐变来创建条纹背景。

水平条纹

首先实现一条基本的垂直线性渐变：

     div {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: linear-gradient(#fb3, #58a);
    }

在这里插入图片描述

从图中可看到很明显的颜色渐变。

我们试着将色标拉近：

    /* 0~20%是#fb3实色，从80%~100%是#58a实色，中间都是渐变色 */
    background: linear-gradient(#fb3 20%, #58a 80%);

在这里插入图片描述

可以看到容器顶部20%区域被填充为#fb3实色,而底部20%区域被填充为#58a实色。真正开始渐变的只有中间的60%。

再次将色标拉近：

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

在这里插入图片描述
此时渐变区域明显更窄了。

如果将两个色标重合在一起会怎样呢？

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

在这里插入图片描述
可以看到，图中已经没有渐变色了，只有两块实色。

那么该如何实现条纹背景呢？其实我们本质上已经创建了两条巨大的水平条纹，现在只需要调整它的尺寸。

background-size

我们利用background-size属性来完成：

定义和用法

background-size 属性规定背景图像的尺寸。

语法

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

了解 background-size 属性后，我们设置length，将宽度设置为100%，高度设置为30px:

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

在这里插入图片描述

从图中我们可以看到，两条条纹的高度都缩小为15px。由于背景在默认情况下是重复平铺的，整个容器都被铺满。

如果想创建不等宽的条纹，只需要调整色标的位置即可：

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

在这里插入图片描述
这样每次改动条纹宽度时都要修改两个数字，我们可以走一下捷径：

规范是这样说的：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置会被设置为它前面所有色标位置值的最大值。

意思就是说，如果我们把第二个色标的位置设置为0 ，那么它的起始位置就会被设置为前一个色标的末位置。

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

这样的写法，结果与上面的一样，但代码更加DRY。

如果想创建超过两种颜色的条纹，怎么办呢？

  /* 0~33.3% 是#fb3实色，33.3%~66.6%是#58a实色，66.6% ~ 100%是yellow实色 */
     background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellow 0);

在这里插入图片描述
图中实现了三条巨大条纹。

想分成多个条纹，使用background-size属性调整其尺寸就行：

     background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellow 0);
     background-size: 100% 50px;

在这里插入图片描述

垂直条纹

css如何实现垂直条纹，其实只需要在linear-gradinet属性开头加一个参数to right（to left）即可。只是默认为to bottom 就与前面的例子一样，于是就省略了这个参数。同时我们还要把刚刚设置的background-size的两个属性值颠倒一下就行了。

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

在这里插入图片描述要想创建不等宽的条纹，与上面水平条纹一样，只需要设置色标的位置值即可。

斜向条纹

斜向条纹是不是修改一下渐变方向和background-size的值就行了呢？

看一下例子：

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

在这里插入图片描述
从图中我们看到并没有实现斜向条纹。我们只是把每个“贴片”内部的渐变旋转了45deg，而不是把整个背景旋转45deg。

其实只有实现无缝拼接的图案才可以生成斜向条纹。即每个“贴片”含4条条纹，而不是两条：

  /* 0~25% 是#fb3实色，25%~50%是#58a实色，50% ~ 75%是#fb3实色, 75% - 100%是#58a实色 */
       background: linear-gradient( 45deg, #fb3 25% ,#58a 0 , #58a 50%, #fb3 0, #fb3 75%, #58a 0 );
       background-size:  50px 50px;

在这里插入图片描述

更好的斜向条纹

如果倾斜角度是60deg或者其他的角度呢？如果只改变渐变角度，那么结果看起来不如人意：

    background: linear-gradient( 60deg, #fb3 25% ,#58a 0 , #58a 50%, #fb3 0, #fb3 75%, #58a 0 );
    background-size:  50px 50px;

在这里插入图片描述
幸运的是有更好的方法创建斜向条纹，linear-gradient与radial-gradient有一个循环式加强版： repeating-linear-gradient和repeating-radial-gradient。它们的工作方式跟前两者类似，只有一点不同：色标是无线循环重复的，直到填满整个背景。

下面来看一个重复渐变的例子：

     div {
        width: 200px;
        height: 200px;
        margin: 0 auto;
       
        background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
    }

在这里插入图片描述
从效果上来看：我们得到了条纹效果，可猜想重复线性渐变完美适用于条纹效果。不需要像上面一样创建无缝拼接的“贴片”了。

用重复渐变实现斜向45deg的条纹效果：

     background: repeating-linear-gradient(45deg,#fb3,#fb3 15px, #58a 0,#58a 30px);

在这里插入图片描述
重复渐变的好处明显好于“贴片”做法的最大好处是：可以随意改变渐变的角度。

实现60deg的条纹只需要改变角度就好：

     background: repeating-linear-gradient(60deg, #fb3,#fb3 15px,#58a 0, #58a 30px);

在这里插入图片描述
[注意]：重复渐变这种方法，无论条纹的角度如何，我们在创建条纹时都要用到4个色标。建议最好使用前面的的方法实现水平与垂直条纹，而用这种方法实现斜向条纹。

灵活的同色系条纹

如果我们想创建由差异不大的几种颜色组成条纹，利用上面的方法是这样的：

    background: repeating-linear-gradient(30deg, #79b, #79b 15px,#58a 0, #58a 30px);

在这里插入图片描述

我们得到了一个同色系条纹图案。但这样每次想修改颜色要改4处，有点麻烦。

另一种更好的方法：

不再为每一种条纹指定一种颜色，我们只需要指定一种主色调，而其他的颜色使用半透明白色的条纹叠加到一起。

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

效果与上面得到的效果一样。