How to realize repetitive linear gradient by css3
This article mainly introduces "how to achieve repetitive linear gradients in css3". In daily operation, I believe many people have doubts about how to achieve repetitive linear gradients in css3. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve repetitive linear gradients in css3". Next, please follow the editor to study!
Use multiple color nodes
The following example shows how to set up multiple color nodes:
Example
A linear gradient from top to bottom with multiple color nodes:
# grad {
Background-image: linear-gradient (red, yellow, green)
}
The following example shows how to create a linear gradient with rainbow colors and text:
Example
# grad {
/ * Standard syntax * /
Background-image: linear-gradient (to right, red,orange,yellow,green,blue,indigo,violet)
}
Use transparency (transparent)
CSS3 gradients also support transparency (transparent), which can be used to create a fade-out effect.
To add transparency, we use the rgba () function to define the color node. The last argument in the rgba () function can be a value from 0 to 1, which defines the transparency of the color: 0 for full transparency and 1 for complete opacity.
The following example demonstrates a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to a completely opaque red:
Example
A linear gradient from left to right with transparency:
# grad {
Background-image: linear-gradient (to right, rgba (255pm 0j0jue 0), rgba (255pd0re0j0pl 1))
}
Repetitive linear gradient
The repeating-linear-gradient () function is used for repeated linear gradients:
Example
A repetitive linear gradient:
# grad {
/ * Standard syntax * /
Background-image: repeating-linear-gradient (red, yellow 10%, green 20%)
}
At this point, the study of "how to achieve repetitive linear gradients in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
