时间戳

首页 > 解决方案 > Ionic 4，动态背景图片

angular - Ionic 4，动态背景图片

问题描述

我一直在尝试在 ionic 4 项目中添加多个背景图像。对于静态图像，我创建了样式，但对于动态图像，样式错误。

     <ion-content style = "--background: url('https://restcountries.eu/data/pak.svg') 0 0/100% 50% no-repeat, 
                                   url('https://restcountries.eu/data/pak.svg') 0 100%/100% 50% no-repeat">  

                               ...............Some Code........................... 

        </ion-content>

目前它给了我2张背景图片。对于动态我正在尝试：

<ion-content style = "--background: url('{{flag1}}') 0 0/100% 50% no-repeat, 
                                   url('{{flag2}}') 0 100%/100% 50% no-repeat">  

                               ...............Some Code........................... 

        </ion-content>

但是没有显示图像。任何人都可以帮助我这样做。谢谢

标签： angularionic-frameworkionic4

解决方案

对于动态图像，您可以使用：

[style.background-image]="'url(' + imageLink + ')'"

对于背景位置添加：

style='background: 0 0/100% 50% no-repeat'

给你的ion-content

<ion-content [style.background-image]="'url(' + imageLink + ')'" style='background: 0 0/100% 50% no-repeat'>  

   ...............Some Code........................... 

</ion-content>

更新 对于单个动态背景图像：

里面page.scss添加：

ion-content{
  --background: none
}

在离子含量内添加：

<ion-content 
[style.background-image]="'url(' + imageLink + ')'" 
[style.background-size]="'cover'" 
[style.background-repeat]="'no-repeat'"
>

这将适用于离子 4

推荐阅读