html - 如何从我网站的图像创建导航菜单？

Question

我想使用 Photoshop 中的图像创建导航栏。我尝试将图像用作 .png，但我的页面中没有任何内容。即，页面是空白的。这是页面的 css 和导航栏的图像。请有人帮助我。

*{ margin:0; padding:0; } 

ul#awesome-menu {
    width: 517px; margin: 250px auto;
    list-style: none;
}


ul#awesome-menu li a {
    display: block; float: left; height: 56px;
    background-image: url(![enter image description here][1]/web/Project/butt.png) no-repeat; text-indent: -9999px;
}

ul#awesome-menu li a.ninja {
    width; 96px; background-position: 0 0;
}

ul#awesome-menu li a.zombie {
    width; 108px; background-position: -96px 0;
}

ul#awesome-menu li a.robot {
    width; 97px; background-position: -204px 0;
}

ul#awesome-menu li a.assassin {
    width; 121px; background-position: -301px 0;
}

ul#awesome-menu li a.jedi {
    width; 94px; background-position: -422px 0;
}

ul#awesome-menu li a.ninja:hover {
    background-position: 0 -56px;
}

ul#awesome-menu li a.zombie:hover {
    background-position: -96px -56px;
}

ul#awesome-menu li a.robot:hover {
    background-position: -204px -56px;
}

ul#awesome-menu li a.assassin:hover {
    background-position: -301px -56px;
}

ul#awesome-menu li a.jedi:hover,ul#awesome-menu li a.jedi: focus {
    background-position: -422px -56;
}
ul#awesome-menu li a.jedi:hover {
    background-position: -422px -56px;
}

a { outline:none;}

Answer 1

ul#awesome-menu li a 选择器的 background-image 格式为 Markdown .您需要在 CSS 中对其进行正确格式化才能使其正常工作。

background-image: url('../web/Project/butt.png') no-repeat;