Линейный градиент к изображению в Nativescript - PullRequest
Новая
       21

Линейный градиент к изображению в Nativescript

1 голос
/ 07 мая 2019

Я пытаюсь применить прозрачный линейный градиент к изображению.

Я использую 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.

1 Ответ

0 голосов
/ 07 мая 2019

Как и ожидалось, 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));
}
...