我在 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 上的這種行為？
uj5u.com熱心網友回復：
您可以使用漸變層覆寫影像（或任何組件），以在兩個平臺上實作相似的結果。
模板
<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))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/463104.html