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));
}

本机脚本中图像的线性渐变

1 个答案: