网址在这里:
在这个页面上,你可以看到标签目前是蓝色的,但我目前正在处理离线文件,我正在切换到自然的绿色,这在整个网站的设计中都可以看到。不幸的是,我不知道我做了什么,感觉我疲惫的眼睛没有注意到这个错误……无论是在代码中还是在图像中…
离线选项卡导航问题:http://i255.photobucket.com/albums/hh157/redbairn/Oops_zps240d13a5.jpg
[下面的代码是Tab导航的当前代码:]
div.content {
border: 3px solid #095;
clear: left;
padding: 1em;
overflow:hidden;
}
div.content.inactive {
display: none;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
background: #bdf url(tabs.gif);
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
}
ol#toc li a.active {
background-color: #095;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li a.active span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tabs.gif) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
[离线/新代码:]
div.content {
border: 3px solid #095;
clear: left;
padding: 1em;
overflow:hidden;
}
div.content.inactive {
display: none;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
background-color: #6c9;
background-image: url(tabs.gif);
}
ol#toc a:hover {
background-color: #0c6;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
}
ol#toc li a.active {
background-color: #096;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li a.active span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tabs.gif) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
我想是图片。虽然你将背景色设置为透明是正确的,但对我来说,图像本身看起来像是白色的背景。在编辑器中打开图像,您会注意到图像中的白色背景。我想如果你把它从你的形象中去掉,一切都会看起来很棒!
希望这对你有帮助!
只是一个快速的供参考,在旧的浏览器,如IE5,透明工作不是很好