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

When I used the HTML attribute background: linear-gradient(angle, color-stop1, color-stop2) to add the gradient effect to an image in huawei quick app, the gradient color does not take effect, but it can apply to the text element for a quick app.

The image is opaque. Therefore, even if the gradient background is set, it cannot be seen because it is covered by the image above.

You can set the stack element as a parent of the image element, set the div element to cover the image element, and set the gradient background on the div element. (You do not need to set the gradient background on the image element.)

The code for implementation is as follows:

<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>

Final Effect

For more information, please refer to:

Gradient style of the quick app

Quick app materials