Nativescript 中图像的线性渐变

Question

我正在尝试在图像上应用透明线性渐变。

我正在使用 Angular 7.2.0, tns-core-modules 5.3.1

Html:

<Image src="https://mdn.mozillademos.org/files/15525/critters.png" class="imgGrad"></Image>

Css:

.imgGrad{
    height:80;
    width:150;
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}

此代码适用于 IOS but not with Android。

Answer 1

这实际上是预期的，iOS 支持多层，因此将有一个单独的层来保持图像上方的背景渐变。使用 Android，它只是背景，当您将图像放在背景上时，背景将不可见。

解决方案是在图像上方使用单独的视图进行渐变。

HTML

<GridLayout class="container">
    <Image src="https://mdn.mozillademos.org/files/15525/critters.png"></Image>
    <StackLayout class="gradient"></StackLayout>
</GridLayout>

CSS

.container {
    height:80;
    width:150;
}

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

Nativescript 中图像的线性渐变

Linear Gradient to an Image in Nativescript

linear-gradients

nativescript