Ionic 4 - 应用广泛的背景图像

Question

我正在尝试设置应用程序范围的背景图片。

@media (min-width: 820px) {
    body {
        --background           : url('https://dummyimage.com/2048x1536/000/fff') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size   : cover;
        background-size        : cover;
    }
}

@media (max-width: 820px) {
    body {
        --background           : url('https://dummyimage.com/1440x1080/000/fff') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size   : cover;
        background-size        : cover;
    }
}

@media (max-width: 576px) {
    body {
        --background           : url('https://dummyimage.com/1024x768/000/fff') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size   : cover;
        background-size        : cover;
    }
}


:host {
    ion-content {
        --background: none;
    }
}

这行不通。如果我用 ion-content 替换 body，它确实有效，但由于我的页面都有它们的 ion-content，它不能很好地处理页面之间的转换（背景转换也是如此）。

有点迷茫

Answer 1

我认为您可以通过在 index.html 内设置标签样式来实现您需要的功能：

<body>

  <app-root></app-root>

  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <style>
    body {
      background: url('https://dummyimage.com/1024x768/000/fff') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
    }
  </style>
</body>

您也可以在那里使用媒体查询。

然后你需要在 theme/variables.scss:

中的 :root 中将 ion-content background 设置为 none

:root {
  ion-content {
    --background: none;
  }

Ionic 4 - 应用广泛的背景图像

Ionic 4 - Application wide background image

css

ionic4