线性渐变不适用于 Android 设备 (NativeScript 8)

Question

我在我的 NativeScript 8 应用程序中为图像实现了线性渐变。它在 iOS 上工作正常，但 Android 不知何故有一些问题。我也尝试过使用 -webkit-linear-gradient() 等解决方案，但它仍然没有达到我的预期。

这是我的实现：

HTML

  <GridLayout rows="auto, auto, auto, auto, auto">
    <image class="backgroundImage" src="~/assets/images/registration.png"></image>
    ...
    ...
    ...
  </GridLayout>

和我的CSS

.backgroundImage {
  background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
  width: 100%;
}

我的 iOS 模拟器的屏幕截图（应该是这样的）

我的 Android 模拟器的屏幕截图（渐变在这里不起作用）

我的问题：我的实现有什么问题，是什么导致了 Android 上的这种行为？

Answer 1

您可以用渐变层覆盖图像（或任何组件），以在两个平台上获得相似的结果。

模板

  <GridLayout rows="auto, auto, auto, auto, auto">
    <Image row="0" src="~/assets/images/registration.png"/>
    <ContentView row="0" height="100%" class="my-gradient"/>
    ... Other Components
  </GridLayout>

风格

  .my-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
  }

线性渐变不适用于 Android 设备 (NativeScript 8)

Linear-Gradient not working on Android device (NativeScript 8)

css

android

nativescript

angular