html - 使用背景图像 CSS

Question

我正在尝试将图像放入我的应用程序的背景中。我似乎遇到了 CSS 的一些问题。我有以下类(class):

.fixedBar {
    position: fixed;
    left:0%;
    top: 0%;
    width:100%;
    padding:15px 15px;
    background-color:#003c0c;
    background-image: url(NavAppPics/city-clipart-black-and-white.gif);
    background-blend-mode: multiply;
    background-size:cover;
    z-index: 6;
}

我正在尝试使用文件夹中的图像，但我不知道如何从文件夹中加载图像。我看过其他类似的问题 os Stack Overflow，但我不知道我在做什么不同。

另外，我试图使图像的底部与固定栏(我正在使用的类)的底部对齐，但是它似乎没有正确排列图像(我切换到在线 URL 以测试这个)。任何想法或帮助将不胜感激!

编辑:

我这部分的文件夹结构是:

• 公开
  • bower_components
  • 指令
  • NavAppPics
    • city-clipart-black-and-white.gif
  • 样式
    • styles.css(类所在的位置)
  • tpl

Answer 1

编辑:您的图像的文件路径一定是错误的。 NavAppPics 文件夹位于何处？如果它在根目录中，在 URL 前面添加一个 / 以告诉它从根目录而不是当前文件夹开始:

background-image: url(/NavAppPics/city-clipart-black-and-white.gif);

至于将图像与 div 的底部对齐:

background-position: center bottom;

关于 background-position 属性的更多信息:

http://www.w3schools.com/cssref/pr_background-position.asp