无法设置背景图片[重复]答案

【问题标题】：Can't set background image [duplicate]无法设置背景图片[重复]
【发布时间】：2015-03-14 01:45:51
【问题描述】：

我正在做一个项目，我正在尝试添加背景图片。 img 确实有效，我可以让它显示在 img src="" 中。但是，当我尝试将其添加为背景图像时，它不起作用。如果有人可以帮助我，我会很高兴！

html {


    body{
        background: url("images/background.png");

    }

    header {
        @include linear();

    }

    nav {
        text-align: center;
    }

    ul {
        padding-top: 200px;

    }

    li {
        display: inline-block;
        padding-right: 70px;
    }

    a {
        text-decoration: none;
        color: black;
        font-size: 20px;
        transition: all 1s ease;
        font-family: 'Elegant Lux';
        &:hover {
            color: gray;

        }
    }

}

【问题讨论】：

图片 url 相对于 css 文件的位置是否正确？例如。如果 css 在 /css/ 那么你应该有 ../images/background.png 吗？
显然应该作为答案而不是评论输入，因为它似乎是正确的！ :)

标签： html css image background sass

【解决方案1】：

看起来你有一个 css 块包裹在你的 css 的其余部分 - 特别是 html 块：

html { //你所有的CSS都在这里 }

确保它像这样分开：

html{

}

body{
    background: url("images/background.png");

}

header {
    @include linear();

}

nav {
    text-align: center;
}

ul {
    padding-top: 200px;

}

li {
    display: inline-block;
    padding-right: 70px;
}

a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    transition: all 1s ease;
    font-family: 'Elegant Lux';
    &:hover {
        color: gray;

    }
}

另外，请确保您的图像路径正确。它将与 css 文件相关，因此您可能需要使用“..”跳转到一个目录。像这样：

body{
    background: url("../images/background.png");
}

【讨论】：

嘿，我明白你的意思了。问题是我正在使用 Sass，所以我正在包装。这就是让它看起来有点奇怪的原因。问题是我对 sass 有点陌生，所以这可能是个问题。
哦，对了，那可能是他们的路径问题。您是否检查过 sass 到 css 的输出？看起来还好吗？
好吧，如果我在 img src="images/background.png" 中使用它，它就可以工作。所以我真的不知道它是什么......
嘿，我现在知道了。这是你所说的路径。不得不去../../images/background.jpg。
很高兴听到，记住 css 文件会查找相对于自身的图像。所以如果它在同一个目录中，那么“background.jpg”就足够了。否则，您需要将其指向正确的方向。