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

Question

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

Answer 1

图像不透明。所以即使设置了渐变背景也看不到，因为被上图遮住了

您可以将 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, 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>

最终效果

更多信息请参考：

Gradient style of the quick app

Quick app materials

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

Unable to add gradient effect to image in Huawei Quick Appp Image

huawei-mobile-services

appgallery

appgallery-connect