【HarmonyOS】鸿蒙背景色渐变叠加

最新推荐文章于 2025-03-25 14:25:38 发布

zhongcx01

最新推荐文章于 2025-03-25 14:25:38 发布

阅读量233

点赞数 1

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/zhongcongxu01/article/details/142582249

版权

【HarmonyOS】仿前端css中的背景色渐变两层叠加

/*
 * 前端css中的背景色渐变两层叠加效果
 *
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Background Test</title>
    <style>
        .gradient-background {
            width: 100%;
            height: 100vh;
            background-image:
                linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f3f5f7 100%),
                linear-gradient(58deg, #4966ff 1%, #3489ff 50%, #28b2ff 100%);
        }
    </style>
</head>
<body>
    <div class="gradient-background">
        <h1>测试</h1>
    </div>
</body>
</html>
 * */

@Entry
@Component
struct Page64 {
  build() {
    Column() {
      Text('仿前端css中的背景色渐变两层叠加')
      Stack(){
        Text().width('100%').height('100%').linearGradient({
          angle: 58,
          colors: [[0x4966ff, 0.0], [0x3489ff, 0.5], [0x28b2ff, 1.0]]
        })
        Text().width('100%').height('100%').linearGradient({
          angle: 180,
          colors: [['rgba(255, 255, 255, 0)', 0.0],  [0xf3f5f7, 1.0]]
        })
        Text('测试')
      }.width('200lpx').height('200lpx')
    }
    .height('100%')
    .width('100%')
  }
}