重复线性渐变repeating-linear-gradient使用

CSS3 线性渐变（linear-gradient）我们比较熟悉，是沿着一根轴线（水平或垂直）改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边），重复线性渐变(repeating-linear-gradien)呢？

一、重复线性渐变介绍

　　repeating-linear-gradient()函数创建一个由重复线性渐变组成的 。它类似于linear-gradient() 并采取相同的参数，但它会无限的重复整个过程至覆盖其整个容器

1、语法结构：

1.  
   repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [,<color-stop>] )
2.  
   \---------------------------------/\----------------------------/
3.  
   Definition of the gradient line List of color stops
4.  
    
5.  
   where <side-or-corner> = [left | right] || [top | bottom]
6.  
   and <color-stop> = <color> [ <percentage> | <length>]?

2、参数介绍

（1）angle：渐变的角度，0deg到360deg，也可以是负数，默认值180deg。除了deg可以表示角度之外，turn、grad、rad，都可以表示角度。比如一个满圆360deg=1turn。

（2）side-or-corner：用方位来表示角度，比如 to top 表示0deg，to bottom 表示180deg，to right 表示90deg，to left 表示270deg。其实就是y轴的顺时针旋转。

　　也可以 to left top 表示从右下到左上的对角线。to left bottom 表示从右上到左下的对角线。 默认是从上往下。

（3）color-stop：由颜色和位置组成。

　　颜色是必须值，位置可以是固定像素值，也可以是百分比值。多个颜色用逗号隔开。

　　比如： #ff8 50%，rgba(255,255,255, .6) 120px，transparent(透明度) 12%等。

3、其实重复渐变有点像ps里面的填充图案，定义一个图案为基本单元，然后在一个区域里面进行平铺，达到重复的目的。

二、案例介绍

1、两个颜色构成一个基本单元，第一个颜色从0开始，第二个颜色占据容器高度的10%的位置。所以容器高，渐变条就高，与容器高度保持一致的变化。

1.  
   // HTML：
2.  
   <div class="box"></div>
3.  
    
4.  
   // CSS：
5.  
   html,body{
6.  
   height:100%;
7.  
   }
8.  
   body{
9.  
   background: repeating-linear-gradient(#a18cd1, #fbc2eb 10%);
10.  
    }

 2、三个颜色构成一个单元，加上角度。

1.  
   html,body{
2.  
   height:100%;
3.  
   }
4.  
   body{
5.  
   background: repeating-linear-gradient(45deg,#3f87a6, #ebf8e1 15%, #f69d3c 20%);
6.  
   }

3、颜色可以固定具体的位置，当结束颜色和下一个起始颜色的位置是一样，但颜色值不一样的时候，可以产生很生硬的过渡，如果两个不同颜色之间的距离越大，渐变越柔和。颜色单元的高度固定的时候，不随着容器的大小发生高度的变化，只是平铺多少的变化了。

1.  
   body{
2.  
   background: repeating-linear-gradient(#ff9a9e, #fad0c4 40px,#eee 40px, #eee 50px);
3.  
   }

4、可以直接用transparent表示透明。 

1.  
   .box{
2.  
   width:300px;
3.  
   height:260px;
4.  
   margin:20px auto;
5.  
   background: repeating-linear-gradient(transparent,transparent 10px, rgba(245,219,203,.5) 10px, rgba(245,219,203,.5)
6.  
   20px), url(images/fengjing.jpg);
7.  
   }

如下图所示：从上到下 0 - 10px 是透明，10px - 20px 是 rgba(245,219,203,.5) ，无限重复，直到填满父级的高度

三、实例实现

　　这样一个效果如何实现呢？

　　有了上面的知识背景，那么实现就比较简单咯。分析下：

首先这是由一个父级div(相对定位)，和两个子级div(绝对定位)构成的

1.  
   <div class="pr box">
2.  
   <div class="pa item1"></div>
3.  
   <div class="pa item2"></div>
4.  
   </div>

1. 底图颜色是由其中一个子级线性渐变从开头0%~100%的一个铺满；

1.  
   .item1 {
2.  
   background-image: linear-gradient(90deg, #0088cc 0%, #1ce9e9 100%);
3.  
   }

2. 中间的间隔（重复线性渐变：透明色和中间颜色间隔重复）

0-5px为透明(不影响底色)，5-10px为隔断色(与主图背景颜色融合一致，形成隔断的效果)

1.  
   .item2 {
2.  
   background: repeating-linear-gradient(
3.  
   90deg,
4.  
   transparent,
5.  
   transparent 5px,
6.  
   rgb(0, 18, 48) 5px,
7.  
   rgb(0, 18, 48) 10px
8.  
   );
9.  
   }

这篇好文章是转载于：学新通技术网