-1

ウェブサイトはこちら：

このページでは、タブの色が現在青色であることがわかりますが、私は現在オフライン ファイルで作業しており、Web サイトのデザイン全体に見られる自然な緑色に変更しています。残念ながら、私は自分が何をしたのか見当がつかず、疲れた目は間違いに気付かないと感じています...それがコードにあるのか画像にあるのか...

オフライン タブ ナビゲーションの問題: http://i255.photobucket.com/albums/hh157/redbairn/Oops_zps240d13a5.jpg

[以下のコードは、タブ ナビゲーションの現在のコードです:]

     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;
}
4

1 に答える 1

0

そのイメージだと思います。背景色を透明に設定するのは正しかったのですが、画像自体は白い背景のように見えます。エディタで画像を開くと、画像の白い背景に気付くでしょう。画像からそれを削除すると、すべてが見栄えが良くなると思います!

これがお役に立てば幸いです！

参考までに、IE5 などの古いブラウザーでは、transparent はうまく機能しません。

于 2013-01-13T22:04:01.513 に答える