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

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

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

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

1 个答案: