Question

我正在使用离子制作应用程序，但无论我尝试什么，背景图像都不会出现。我检查过以前的问题，但没有解决方案适合我。这是我的css：

body {
    background-image: url("img/national day.png");
    display:block;
    position:absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    /*position: relative;*/
}

我知道路径是正确的，因为当我使用chrome进行调试时它在帧中存在。我的css目录中有一个img文件。为什么不出现图片小提琴：https://jsfiddle.net/y04jpe0h/

Answer 1

在代码中添加这部分CSS

html{
  height:100%;
}

希望有效！

Answer 2

试试这个。我删除了100％100％属性的背景大小。

{
    background: url("img/national day.png") no-repeat center center fixed;
    display: block;
    position: absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: auto;
}

希望这会对你有所帮助。

Answer 3

首先要访问文件夹img，你必须把：
background-image：url（＆＃34; ../ img / logo.png＆＃34;）; 因为img文件夹没有进入css文件夹。第二，确保你有img文件夹中的图像，因为我没有找到它的小提琴，所以它尝试logo .png，它的工作原理。

Answer 4

我不知道为什么它最终没有工作所以我只是将背景图像添加到窗格中并显示出来。仍然是一个谜......

背景图片未显示在手机屏幕上

4 个答案: