0

カスタム Webkit スクロールバーを透明な png 形式で設計しましたが、私のサイトでは透明ではありません。

左端を透明にする方法はありますか?

これが私のコードです：

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

ウェブサイトの URL は次のとおりです。http://captainjackspiratepartys.co.uk/

4

2 に答える 2

5

透明なスクロールバー トラックは Body 要素には使用できませんが、Div 要素には使用できることに気付きました。あなたができることは、コンテンツをボディセクションに直接配置する代わりに、ラッパー Div を作成してそこにコンテンツを配置することです。

サンプル：

::-webkit-scrollbar-track {
    /*no code needed here*/
}
div#wrapper{
    overflow:auto;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
body{
    overflow:hidden;
}
于 2012-11-13T09:40:27.960 に答える
1

私は Chrome を使用していますが、あなたのバーが機能しませんでした。使用する必要がありました。

::-webkit-scrollbar-track-piece:start{
     background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

::-webkit-scrollbar-track-piece:end{
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

また、cssだけで実際にバーを透明にできるとは思いません。透明にする代わりに、画像の背景を暗くするようにしてください。白に比べて目立たなくなります

于 2012-08-02T15:44:15.590 に答える