重复线性渐变repeating-linear-gradient

最新推荐文章于 2024-08-14 13:50:25 发布

菁瑞优智

最新推荐文章于 2024-08-14 13:50:25 发布

阅读量6.6k

点赞数 6

分类专栏： CSS3 文章标签： css3 前端

本文链接：https://blog.csdn.net/jenreal/article/details/117993246

版权

CSS3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

上一篇CSS3 线性渐变（linear-gradient）讲了CSS3线性渐变，本文是它的姐妹篇——重复线性渐变repeating-linear-gradient。

repeating-linear-gradient()函数创建一个由重复线性渐变组成的。它类似于linear-gradient() 并采取相同的参数，但它重复的颜色停止无限的所有方向，以覆盖其整个容器。函数的结果是数据类型的一个对象，它是一种特殊的。

一、语法结构

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [,<color-stop>]+ )
                          \---------------------------------/\----------------------------/
                         Definition of the gradient line      List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length>]?

仔细一看，貌似和linear-gradient没啥区别啊。

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%等。

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

二、案例

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

HTML：

<div class="box"></div>

CSS：

html,body{
    height:100%;
}
body{
    background: repeating-linear-gradient(#a18cd1, #fbc2eb 10%);
}

效果图：

菁瑞优智H5前端

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

HTML：

<div class="box"></div>

CSS：

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

效果图：

菁瑞优智H5前端

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

HTML：

<div class="box"></div>

CSS：

html,body{
    height:100%;
}
body{
    background: repeating-linear-gradient(#ff9a9e, #fad0c4 40px,#eee 40px, #eee 50px);
}

效果图：

菁瑞优智H5前端

3、加上角度和rgba透明度的变化

HTML：

<div class="box"></div>

CSS：

html,body{
    height:100%;
}
body{
    background: repeating-linear-gradient(45deg,#e1e1e1, #e1e1e1 10px,#fff 10px, #fff 20px);
}
.box{
    width:300px;
    height:300px;
    margin:10px auto;
    background:repeating-linear-gradient(-45deg,rgba(50,185,181,.5),rgba(50,185,181,.5) 10px,rgba(255,255,255,.5) 10px,
    rgba(255,255,255,.5) 20px);
}

效果图：

菁瑞优智H5前端

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

HTML：

<div class="box"></div>

CSS：

html,body{
    height:100%;
}
.box{
    width:300px;
    height:260px;
    margin:20px auto;
    background: repeating-linear-gradient(transparent,transparent 10px, rgba(245,219,203,.5) 10px, rgba(245,219,203,.5)
     20px), url(images/fengjing.jpg); 
}

效果图：

菁瑞优智H5前端

5、结合多重背景和透明度，可以实现很丰富的效果

CSS：

html,body{
    height:100%;
}
body{
    background:repeating-linear-gradient(0.125turn, transparent, #a18cd1 40px),repeating-linear-gradient(-0.125turn ,
    transparent, #fbc2eb 40px);
}

效果图：

菁瑞优智H5前端

再来一个疯狂的提一下神

CSS：

html,body{
    height:100%;
}
body{
    background: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5)
    10px,hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
    hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
    hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
    hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
    hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px       
    ),
        repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
    hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
    hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
    hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
    hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
    hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px       
    );
}

效果图：

菁瑞优智H5前端