使用径向渐变时的褪色
[英]Fading color in using radial-gradient
问题描述
我正在尝试向我的 header 添加径向渐变背景。 我正在使用径向渐变在 header 的底部添加曲线效果。 我想要一个效果，从顶部到 header 的颜色较浅，容器越往下越暗。 目前，我的 header 具有我想要的曲线，但显示的颜色是 1 纯色而不是褪色。
我可以使用径向渐变来实现这种外观吗？
所需外观的照片：
CSS的代码片段：
<html> <head> <style> #container { height: 200px; width: 400px; background: radial-gradient(100% 95% at top,#E8F3F9 100%,#0000 ); border: 1px dotted wheat; } </style> </head> <body> <div id="container"></div> </body> </html>
我尝试在背景 CSS 的at top添加较浅的十六进制颜色#fefefe ，但最终将整个 header 变成了 1 种颜色。
background: radial-gradient(#fefefe 100% 95% at top,#E8F3F9 100%,#0000 );
2 个解决方案
解决方案1
1 2021-12-09 01:18:57
将渐变移动到遮罩，然后使用另一个作为背景：
#container { height: 200px; width: 400px; -webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000); mask: radial-gradient(100% 95% at top, #000 100%, #0000); background: linear-gradient(#0000,#E8F3F9); }
<div id="container"></div>
解决方案2
1 2021-12-09 01:32:44
基本上，您正在尝试使用渐变创建硬线。 在这里您可以找到渐变的一些用途，包括使用 CSS 渐变的硬线。
要创建硬线，您必须为两个 colors 定义相同的 position。
在这种情况下，它看起来像下面的代码。
<html> <head> <style> #container { height: 200px; width: 400px; background: radial-gradient(100% 95% at top,#ffffff 5%, #E8F3F9 100%,#ffffff 100% ); border: 1px dotted wheat; } </style> </head> <body> <div id="container"></div> </body> </html>
其中#E8F3F9和 #ffffff 为 100% #ffffff 。
我添加了#ffffff 5%来创建顶部灯光效果。
径向渐变未按预期工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.