【HarmonyOS】背景色渐变叠加

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

cke_152.png

复制代码
/*
 * 前端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%')
  }
}
复制代码

 

posted @   zhongcx  阅读(21)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示