css - スプライトを使用するときに背景画像をトリミングする方法

Question

ここにファイルがあります：http ：//studioteknik.ca/stackoverflow_question/test1.html一度に1つの背景画像、たとえば2番目の画像だけを表示する必要があります。上から400ピクセルですが、クロップトップ400の高さの画像が必要です。どうやってするか ？

Answer 1

一般に、コンテンツ画像は背景やスプライトではなく、IMGタグを使用したインライン画像である必要があります。スプライトは通常、アイコンやメニュー要素などのUI要素用に予約されています。

<div class="sprite1"></div>

CSS：

.sprite1 { 
        height:400px;
        width:400px;
        background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
        background-position:0 -400px; 
    }

Answer 2

疑似要素（前/後）を使用して、スプライトに必要なボックスサイズを生成し、それに背景画像を追加します。

このようにして、「通常の」要素をposition: relativeに、:afterをに設定できますposition: absolute;。

次にafter、メインコンテナに対して必要な位置に配置し、after要素のサイズにより、画像スプライトの「ブリードアウト」が防止されます。

私はそのテクニックをここでより完全に文書化しました：http：//benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/

Answer 3

はい-それは良い答えです。通常、スプライトは通常の画像とまったく同じように配置しますが、高さと幅は、スプライトの一部だけを覆うように設定します。変化するのは背景の位置だけです。高さ40ピクセルのスプライトがあり、高さ20ピクセルの画像が2つあることを表示したい場合、コードは次のようになります。

  .sprite1{ height:20px;
 width:20px;
 background-image:url("myimage.jpg");
  background-position: 0 0;
 }

.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}