タブボタンの背景画像を使用してタブメニューシステムを構築しようとしています。
タブボタンの画像は、高さ200ピクセル、幅40ピクセルです。これらのタブの高さを可変にしたいので、使用している画像のタブボタンの内側に3つの異なる位置を設定して、中央を柔軟な高さにした上下の丸みを帯びた外観にすることができるかどうか疑問に思いました。
これが私の試みです。それは私が望んでいた結果を生み出していません。これはどのように機能する必要がありますか：
background-image:url(tabs-large.png);
background-position:0 0, 0 20px, 0 180px;
background-size:100% 20px, 100% 100%, 100% 20px;
現在、1つしかありませんbackground-image。これにより、レイヤーが1つだけ作成されるため、0 0位置と100% 20pxサイズのみが使用され、残りは無視されます。
タブ画像全体を表す場合tabs-large.pngは、たとえば、上端、下端、中央部分の3つの部分にスライスしてから、各部分を独自の画像で指定する必要があります。また、中央部分が繰り返されている間、上端と下端が繰り返されないようにする必要があります。
コードは次のようになります。
background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png);
background-position: 0 0, 0 20px, 0 180px;
background-repeat: no-repeat, repeat-y, no-repeat;
background-size: 100% 20px, 100% 100%, 100% 20px;
このように、各画像は同じ順序で1つの位置と1つのサイズに対応します。