华为快应用图片无法给图片添加渐变效果

问题描述

我在华为快应用中使用HTML属性background:linear-gradient(angle,color-stop1,color-stop2)给图片添加渐变效果时，渐变色不生效，但是可以应用到快速应用的文本元素。

解决方法

图像不透明。因此，即使设置了渐变背景，也无法看到，因为它被上图覆盖了。

您可以将stack元素设置为image元素的父元素，将div元素设置为覆盖image 元素，并在 div 元素上设置渐变背景。 （您不需要在 image 元素上设置渐变背景。）

实现代码如下：

<template>
  <!-- Only one root element is allowed in template. -->
  <div class="container">
     <stack>
       <image src="/Common/img/compress.png" style="width: 100%; height: 300px"></image>
       <div style="width: 100%; height: 300px;background: repeating-linear-gradient( rgba(255,.5),rgba(0,255,.5));"></div>
     </stack>
 
    <text style="background: repeating-linear-gradient( rgba(255,.5));"> nice scene,beautiful </text>
  </div>
</template>

最终效果

更多信息请参考：

Gradient style of the quick app

Quick app materials