How to use repeating-linear-gradient

CSS3 linear gradient (linear-gradient) we are more familiar with, is to change the color along an axis (horizontal or vertical), from the starting point to the end color for sequential gradient (pulling from one side to the other side), repeating the linear gradient (repeating-linear-gradien)?

I. Introduction to Repeating Linear Gradients

The repeating-linear-gradient() function creates a consisting of repeating linear gradients.It is similar to linear-gradient() and takes the same parameters, but it repeats the process indefinitely to cover its entire container

1. Grammar structure:

repeating-linear-gradient( [  | to  ,]?  [,]+ )\---------------------------------/\-----------------------------/Definition of the gradient line List of color stopswhere  = [left | right] || [top | bottom]and  =  [  | ]?

2. Parameter introduction

(1) angle: The angle of the gradient, 0deg to 360deg, can also be negative, the default value is 180deg.In addition to deg, which can represent an angle, turn, grad, and rad can all represent an angle.For example, a full circle 360deg=1turn.

(2) side-or-corner: use the orientation to represent the angle, such as to top means 0deg, to bottom means 180deg, to right means 90deg, to left means 270deg.In fact, it is a clockwise rotation of the y-axis.

can also be to left top to mean a diagonal line from bottom right to top left.to left bottom means the diagonal line from top right to bottom left.The default is top to bottom.

(3) color-stop: consists of color and position.

The color is a required value, and the position can be a fixed pixel value or a percentage value.Multiple colors are separated by commas.

For example: #ff8 50%, rgba(255,255,255, .6) 120px, transparent 12%, etc.

3. In fact, the repeating gradient is a bit like the fill pattern in ps. A pattern is defined as the basic unit, and then tiled in an area to achieve the purpose of repetition.

II. Case introduction

1. Two colors form a basic unit, the first color starts from 0, and the second color occupies 10% of the height of the container.So the container is tall, the gradient bar is tall, and the change is consistent with the height of the container.

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

2. Three colors form a unit, plus the angle.

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

3. The color can be fixed at a specific position. When the position of the ending color and the next starting color is the same, but the color values ​​are different, a very blunt transition can be generated. If the distance between the two different colors isThe larger the gradient, the softer the gradient.When the height of the color unit is fixed, the height does not change with the size of the container, but only how much the tiling changes.

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

4, you can directly use transparent to represent transparency.

.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);}

As shown below: 0 - 10px from top to bottom is transparent, 10px - 20px is rgba(245,219,203,.5) , repeating infinitely until it fills the height of the parent

Three, example implementation

How can such an effect be achieved?

With the above knowledge background, the implementation is relatively simple.Under analysis:

First of all, this is composed of a parent div (relative positioning) and two child divs (absolute positioning)

1. The color of the basemap is covered by one of the children's linear gradients from 0% to 100% at the beginning;

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

2. The space in the middle (repeating linear gradient: the transparent color and the middle color are repeated at intervals)

0-5px is transparent (does not affect the background color), 5-10px is the partition color (consistent with the background color of the main image to form a partition effect)

.item2 {background: repeating-linear-gradient(90deg,transparent,transparent 5px,rgb(0, 18, 48) 5px,rgb(0, 18, 48) 10px);}