在離子中設置背景不起作用

Question

嗨，我正在嘗試為我的主頁設置離子背景圖像，但遇到一些問題，這是我的代碼：

在我的 home.page.scss 上：

ion-content {
    --background: url(src/assets/images/finalbackground.jpg);
    --background-repeat: no-repeat;
    --background-position: center
    --background-size: contain;
}

在我的 home.page.html 上：

<!DOCTYPE html>
    <link rel="home.page" href="home.page.css">
    <ion-content padding class="photo"></ion-content>

圖像應如下所示：

最終的背景圖像應該是什么樣子

它在離子實驗室中的表現：

Ionic Lab 預覽純屏

任何幫助將不勝感激

Answer 1

主頁.html

<ion-content padding></ion-content>

主頁.scss

ion-content {
    --background: url(../../assets/image/bg4.png) 0 0/100% 100% no-repeat;
}

Answer 2

您需要無背景設置，因為如果存在任何背景設置，它將被重置。 使用這樣的代碼。

    ion-content{
      --background: none;
      background-image: url('');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      }

在離子中設置背景不起作用

問題描述

2 個解決方案

解決方案1
0 2019-12-26 04:36:05

解決方案2
0 已采納 2019-12-26 05:24:03

在離子中設置背景不起作用

問題描述

2 個解決方案

解決方案1 0 2019-12-26 04:36:05

解決方案2 0 已采納 2019-12-26 05:24:03

解決方案1
0 2019-12-26 04:36:05

解決方案2
0 已采納 2019-12-26 05:24:03