HarmonyOS 鸿蒙Next中前端CSS背景色渐变两层叠加的写法

HarmonyOS 鸿蒙Next中前端CSS背景色渐变两层叠加的写法
<markdown _ngcontent-qtk-c237="" class="markdownPreContainer">

background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #f3f5f7 100% ), linear-gradient(58deg, #4966ff 1%, #3489ff 50%, #28b2ff 100%);

</markdown>

zlyuanteng 1楼•1 个月前

用stack堆两个组件，分别设置linearGradient

htzhanglong 2楼•1 个月前

这样上面会覆盖下面的

wuwangju 3楼•1 个月前

我试了一下这样做没问题，参考：https://developer.huawei.com/consumer/cn/forum/topic/0202158707540883050?fid=0109140870620153026

wuwangju 4楼•1 个月前

在HarmonyOS（鸿蒙）开发中，如果你需要在前端CSS中实现两层背景色渐变叠加的效果，你可以使用CSS的background属性结合linear-gradient函数来实现。每个linear-gradient定义一层渐变，通过逗号分隔来叠加它们。例如：

.gradient-background {
  background: linear-gradient(to right, red, yellow),
              linear-gradient(to bottom, blue, green);
  /* 注意，如果两层渐变方向或颜色重叠，视觉效果会相互融合 */
}

这段代码创建了一个向右的红色到黄色渐变和一个向下的蓝色到绿色渐变，并叠加在一起。你可以根据需要调整渐变的方向和颜色。如果问题依旧没法解决请加我微信，我的微信是itying888。