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

2024-10-11
广东
本文字数：724 字
阅读完需：约 2 分钟

通过 ArkUI 代码中，模仿前端 CSS 中的背景色渐变两层叠加效果。ArkUI 的组件和 API 与前端 HTML/CSS 有所不同，因此直接复制 CSS 的样式可能并不适用。特别是在处理背景渐变时，ArkUI 可能不支持直接在Text组件上使用渐变，但可以使用不同的方法来实现相同的视觉效果。

/* * 前端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@Componentstruct 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%')  }}

复制代码

发布于: 刚刚阅读数: 4

zhongcx

关注

还未添加个人签名 2024-09-27 加入

还未添加个人简介

发布

暂无评论

创作场景

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

zhongcx

评论