1

複数のスパン要素にわたって 128x89px の部分を表示したいスプライト画像があります。

この例では、問題を強調するために左クリップを 30px に設定しました。通常、これは 128px の倍数になります。左のクリップを 30px にすると、30px の左マージンが追加されるようです。確かに、それを修正するために負の左マージンを追加する必要はありませんか?

私はそれを実際に使用する必要がなかったので、まったくの初心者ですclipが、今はあります。私の理解は、一枚の紙を正方形に切り取ったものと同じです。クリップ値を調整すると、紙が移動するため、表示される画像が変わります。

助けてください。

JSFiddle: http://jsfiddle.net/VgjXr/

CSS: 

a {  
    border: 1px solid #000;  
    height: 89px;  
    width: 128px;  
    display: block;  
}
span.image {  
    background-image: url('http://i1269.photobucket.com/albums/jj591/mark1979smith/splice.jpg');  
    position: absolute;  
    display: block;  
    width: 128px;  
    height: 89px;  
    clip: rect(0px,158px,89px,30px);  
    clear: both;  
}

HTML:

<div class="element" id="cheeseOption7">   
    <div id="optional_46">
        <a href="#">                    
            <span class="image"><!--  --></span>
        </a>
    </div>
</div>
4

1 に答える 1

2

私が見つけた最良の説明clipはこのサイトにありますが、それがどのように機能するかについては一般的に正しく理解していると思います. あなたが把握していないのは、それがあなたの状況にどのように関係しているかです。のclip背景画像で が発生していspanます。左から30px30pxの画像を切り取るようにブラウザに指示していますが (これはまさにフィドルの例が行っていることです)、background の配置には影響しません。

clipスプライトを使用する場合、通常は を使用しませんbackground-positionが、スプライト画像が表示されている要素に関連して位置を切り替えます。したがって、128px x 89px のスプライト画像の場合、 から開始しbackground-position: 0 0て に移動し-189px 0て、1 つの画像を右に移動するか、または0 -89pxに移動します。画像を 1 つ下に移動します。

を使用している理由がcliprequiresであるためだと思いますが、実際にはを使用する必要があるため、すべてをまとめて削除し、要素の背景に直接配置することができます。position: absolutespanbackground-positionspana

于 2012-05-19T16:27:12.570 に答える