HarmonyOS 鸿蒙Next仿前端css中的背景色渐变两层叠加

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next仿前端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%’)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>


更多关于HarmonyOS 鸿蒙Next仿前端css中的背景色渐变两层叠加的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next仿前端css中的背景色渐变两层叠加的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙开发中，要实现类似前端CSS中背景色渐变两层叠加的效果，你可以使用Canvas组件结合绘图API或者直接使用布局和样式属性（如果支持）。通常，这需要使用LinearGradient或RadialGradient类来创建渐变，并可能通过叠加两个ShapeElement或直接在Decoration中设置多层渐变。

示例代码可能涉及在布局XML中定义一个支持背景自定义的组件，然后在Java/Kotlin代码中设置渐变背景。确保你正确设置了渐变的颜色、方向及起始/结束点。

如果问题依旧没法解决请加我微信，我的微信是itying888。

更多关于HarmonyOS 鸿蒙Next仿前端css中的背景色渐变两层叠加的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


回到顶部