huawei-mobile-services - 华为快应用图片无法为图片添加渐变效果

Question

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

Answer 1

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

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

实现代码如下：

<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, 0, 0, .5),rgba(0, 0, 255, .5));"></div>
     </stack>
 
    <text style="background: repeating-linear-gradient( rgba(255, 0, 0, .5),rgba(0, 0, 255, .5));"> nice scene,  beautiful </text>
  </div>
</template>

最终效果

欲了解更多信息，请参阅：

快应用渐变风格

快应用材料