【问题标题】:ionic2 background image not showingionic2背景图像未显示
【发布时间】:2017-10-19 16:55:28
【问题描述】:

我想在ionic2的页面中设置背景图片,

  <style type="text/css">
    ion-content {
      background: url(../../img/background.jpg) no-repeat center center fixed;
    }
  </style>
  <ion-content  padding>
      <h2>Welcome to Ionic!</h2>
  </ion-content>

但它没有显示在设备中。 为什么?

【问题讨论】:

  • 可能你的网址有误。尝试将其更改为互联网上的图像。
  • 这个方法我试过了。
  • 那么,结果如何?
  • 结果是一样的
  • 可能其他元素与您的ion-content 重叠,您看不到结果。删除ion-content中的所有内容。设置它heightwidth 100%。设置background-color: green。将background-image url 更改为实时图像。结果如何?

标签: ionic2


【解决方案1】:

你应该像这样将背景添加到.scroll-content

<style type="text/css">
    .scroll-content {
      background: url(../../img/background.jpg) no-repeat center center fixed;
    }
  </style>
  <ion-content  padding>
      <h2>Welcome to Ionic!</h2>
  </ion-content>

【讨论】:

    【解决方案2】:

    ion-content 添加到您的 CSS 中:

      background-size: cover;
      background-color: transparent;
    

    【讨论】:

      【解决方案3】:

      试试这个

      .content-md {
        background: url("../../img/background.jpg") no-repeat;
      }
      

      【讨论】:

        【解决方案4】:

        将图片放入assets/img文件夹。 然后在您的 css 中使用以下代码:

        background-image: url('../assets/img/background.jpg')
        

        这是因为 Ionic 会搜索相对于 index.html 的图像。

        【讨论】:

          【解决方案5】:

          我知道已经几个月了,但你可以这样做

          <ion-content style="background-image: url('assets/images/background-image.jpg');">
              <h2>Welcome to Ionic!</h2>
          </ion-content>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-04-02
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多