2

私は次のCSSクラスを持っています:

 .acceptRejectAll a, .acceptRejectAll a:visited{
        background-image: url("../images/view-patient.png");
        background-position: left top;
        background-repeat: no-repeat;
        color: #4B555C;
        float: left;
        height: 35px;
        padding-top: 12px;
        text-align: center;
        text-decoration: none;
        width: 100px;  
  }

および次の HTML :

<div style="float: none; display: inline-table" class="acceptRejectAll">
    <a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>

これは次のように表示されます。

ここに画像の説明を入力

次のようにcssクラスのサイズを小さくするとwidth : 85px 、次のように表示されます。

ここに画像の説明を入力

右側から画像を切り取ります：

cssクラスで設定しようとしましbackground-Position たが、左側でも右側でも画像が正しく表示されません

解決策は何ですか？

ありがとう

4

3 に答える 3

1

これには使用する必要がありますbackground-size。例：

background-size: 100% 100%;

この設定により、画像が親に合わせて拡大縮小されることに注意してください。

于 2013-10-09T07:11:37.727 に答える
1

画像は 100 ピクセルなので (少なくとも表示部分は約 92 ピクセルなので、サイズは 100 ピクセルだと思います)、ボタンのサイズを変更する場合は、位置を変更するのではなく、背景画像をスケーリングする必要があります。

background-size:85px 35px;
于 2013-10-09T07:12:09.260 に答える