时间戳

首页 > 解决方案 > 在离子中设置背景不起作用

html - 在离子中设置背景不起作用

问题描述

嗨，我正在尝试为我的主页设置 ionic 中的背景图像，但遇到了一些问题，这是我的代码：

在我的 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 预览纯屏幕

任何帮助将不胜感激

标签： htmlcssionic-frameworkionic4

解决方案

您需要无背景，因为如果存在任何背景设置，它就会被重置。使用这样的代码。

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

推荐阅读