0

スプライト シートに次の画像があり、それを使用してボタンのスタイルを設定したいと考えています。

ここに画像の説明を入力

考えられるすべてのことを試しましたが（疑似要素までも）、機能させることができません。私はこのようなものがうまくいくはずだと思っていました:

.ui-button {
height:45px;
background-image: url(../button.png), url(../button.png), url(../media/button.png);
background-size: 8px 45px, 8px 45px, 3px 45px !important;
background-position: -63px -1px, -77px -1px, -73px -1px; 
background-repeat: no-repeat, no-repeat, repeat;
}

しかし、そうではありません。background-size ビットは、使用しているスプライト シートの各チャンクのサイズであり、位置はスプライト シートの各パーツの左上の座標です。明らかに私は何か間違ったことをしています。何？

編集：これが全体の画像です：

ここに画像の説明を入力

4

1 に答える 1

0

これが私がJSFiddleで試したことです:

http://jsfiddle.net/Kpusc/

.ui-button {
    height:45px;
    width:18px;
    background: url(http://i.stack.imgur.com/ipKrd.png);
    background-position: -72px -1px;
    background-repeat: no-repeat;
    position:relative;
    border:0;
}

.ui-button:before {
    content:"";
    display:block;
    height:45px;
    width:8px;
    background: url(http://i.stack.imgur.com/ipKrd.png);
    background-position: -64px -1px;
    background-repeat: no-repeat;
    position:absolute;left:0;top:0;
}

 .ui-button:after {
     content:"";
     display:block;
     height:45px;
     width:8px;
     background: url(http://i.stack.imgur.com/ipKrd.png);
     background-position: -78px -1px;
     background-repeat: no-repeat;
     position:absolute;right:0;top:0;
 }

</p>

残念ながら、幅は 34px までしか作れませんでした。中央のコンテンツを繰り返すことができないので。

背景画像として適用できるように、中央部分を少なくとも60pxより広くする必要があると思います.ui-button（または、完全に別のファイルとして作成して、繰り返すことができるようにします）。

別の回避策があるかどうか知りたいのですが。

于 2012-10-18T18:50:35.250 に答える