没有颜色过渡的线性渐变
[英]Linear gradient without color transition
问题描述
I'm trying to generate a gradient background with linear-gradient in CSS.
我正在尝试在 CSS 中生成具有linear-gradient的渐变背景。 Here's an example codepen https://codepen.io/JSislife/pen/vYxrYEv .这是一个示例代码笔https://codepen.io/JSislife/pen/vYxrYEv 。 As you can see on the bottom right corner there is no transition of colors between orange and white;正如您在右下角看到的，colors 在橙色和白色之间没有过渡； but the top left is the opposite.但左上角是相反的。 How do I make the top left not have a color transition as well?如何使左上角也没有颜色过渡？
1 个解决方案
解决方案1
0 已采纳 2021-06-06 23:12:54
Just as @G-Cyrillus mentioned in the comments, if you add color stops to your linear-gradient you can create gradient sections that don't fade into eachother but have defined start/stop positions.正如评论中提到的@G-Cyrillus 一样，如果您向线性渐变添加色标，您可以创建不会淡入彼此但已定义开始/停止位置的渐变部分。
body { margin: 0; padding: 0; background: linear-gradient(135deg, white 0% 15%, #bd6430 15% 70%, white 70%) fixed; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Test</title> </head> <body> <div id='home'></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.