Css 离子4-应用范围广泛的背景图像_Css_Ionic4

Css 离子4-应用范围广泛的背景图像

css

Css 离子4-应用范围广泛的背景图像,css,ionic4,Css,Ionic4,我正在尝试设置应用程序范围的背景图像 @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;

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

@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内容替换body，它确实可以工作，但是因为我的页面都有ion内容，所以它不能很好地处理页面之间的转换（背景转换也一样）

我有点迷路了。

我认为通过在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>

成功了。但它主要是让我意识到我犯了一个巨大的错误。看看在我的.scss中，我是如何理解他的——背景的？好吧，那太尴尬了。

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