Question

我正在尝试在离子含量中添加背景图像这是我当前的代码：

#2

我也尝试了以下方法，但发生了同样的事情。

 <ul class="paralx-position">
                   <li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>

它正在浏览器中工作，但是当我执行ion-content{ --background: none; background-image: url('/assets/images/home-background.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; }时，背景图像没有显示。我还尝试将网址更改为ion-content{ --background: url('/assets/images/home-background.png') no-repeat center center / cover; text-align: center; }，ionic cordova run android和url('../assets/images/home-background.png')，但这给了我错误。

I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image

In this second image, I saw the home-background.png

Answer 1

打开scss文件：

ion-content {
    background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
    background-size: 100%; 
}

Answer 2

尝试更改路径，将图像保留在www / assets / img主文件夹中，然后进行设置

background-image: url('assets/img/home-background.png');

Answer 3

背景图片：url（'.. assets / img / home-background.png'）;

如果您已设置路径，则只需输入../或./，路径就会自动提示

Answer 4

由于使用的Ionic 4使用了所谓的Shadow DOM技术，因此只能使用变量访问某些元素，以便更改背景

ion-content {
 --ion-background: url('../asssets/...') !important; 
}

我非常确定上面的代码可以正常工作，以防万一它没有尝试删除android文件夹中的platforms文件夹，请再次构建它，这应该可以工作。

Answer 5

没有机会使用离子含量解决此问题，所以我要做的是将离子含量更改为div，这解决了我的问题。在网络和Android设备上工作。

Answer 6

您可以尝试更改图像网址，如下所示

ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}

这对我有用。

离子4离子含量背景图片未显示在设备上

6 个答案: