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

我想用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;}

来源

2013-01-16 Bboyin Guy

！[输入图片描述] [1]不是有效的文件路径。从那里开始。 –

你可以仔细检查'ul＃awesome-menu li a'的背景属性吗？它看起来像减价以某种方式杀死它。 – cimmanon

请提供您的网址。正如@Diodeus所说：“！[enter image description here] [1]'绝对不是一个有效的路径。如果这是你的css文件中实际存在的问题。另一件事，通常图像文件夹是相对接近你的CSS文件。例如，如果你将css放在一个css文件夹中，并且你的图像位于与你的路径相同的目录下的images文件夹中，它将以'../' – 2013-01-16 16:32:32

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

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

来源

2013-01-16 16:32:41 Jason

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

回答

相关问题