我做错了什么在这个标签导航CSS



网址在这里:

在这个页面上,你可以看到标签目前是蓝色的,但我目前正在处理离线文件,我正在切换到自然的绿色,这在整个网站的设计中都可以看到。不幸的是,我不知道我做了什么,感觉我疲惫的眼睛没有注意到这个错误……无论是在代码中还是在图像中…

离线选项卡导航问题: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,透明工作不是很好

最新更新