web-dev-qa-db-ja.com

Cssスプライトと背景の位置を使用する

たとえば、幅が200ピクセル、高さが200ピクセルのdiv要素があります。 divの右上隅に表示する小さな画像が必要です。通常の方法は

background: url(/images/imagepath.png) top right;

しかし、問題は、スプライトから画像を読み込んでいて、次のようなものを使用するときです

background: url(/web/images/imagepath.png) -215px -759px  top right;

スプライトは適切な場所から選択しないようです。スプライトの他の部分がロードされます。 Spriteから画像をロードし、同様にbackground-position属性を使用することは可能ですか？前もって感謝します...

csscss-spritesbackground-position
18
Maxim Dsouza

要素の位置と背景の位置の座標を2つの異なる方法で指定する必要があります。

#yourimage {
  background-image: url(/web/images/imagepath.png);
  /* background coordinates */
  background-position: -215px -759px;

  /* element coordinates */
  position:absolute;
  left: 0;  /* 0px from the left */
  top:  0;  /* 0px from the top  */
}

とともに background-position背景座標を指定します。要素の座標については、leftおよびrightプロパティを設定する必要があります。

スプライトを使用するには、要素のサイズが正しい必要があることに注意してください。背景として使用している画像には、要素の幅と高さをカバーするのに十分なスペースが必要です。それ以外の場合は、スプライト画像から複数の画像が表示されます。

要素よりも小さな画像を表示する場合は、大きな要素内に小さな要素が必要です。

<div id="container">
  <div class="background"></div>
  my content here
</div>

次に、CSSで

#container {
  position:relative;
  width: 200px;  /* size of your big element */
  height: 200px;
}
#container .background {
  background: url(/web/images/imagepath.png) -215px -759px;
  width:  50px; /* width and height of the Sprite image you want to display */
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
29
Jose Faeti

次のように:before擬似クラスを使用できます。

.element:before {
   content:"";
   position:absolute;
   right:0;
   top:0;
   width:20px;
   height:20px;
   background: url(/web/images/imagepath.png) -215px -759px;
}

しかし、これはまだ十分にサポートされていません。

私のアドバイスは、ラップ内に別の要素を作成し、:beforeのように絶対に配置することです。ただし、実際のdiv

[〜＃〜] edit [〜＃〜]

ボックスのコーナーでスプライトを使用する別のトリッキーな方法は、ここで説明です。

13
avall

SCSSのようなプリプロセッサを使用できる場合：

（尋ねられた質問に実際に答えるように更新された; 実例 ）も参照

// ----------- only things you need to edit { ---------------
$Sprite-size: 16px; // standard Sprite tile size
$Sprite-padding: 0px; // if you have padding between tiles
// ----------- } only things you need to edit ---------------

// basic Sprite properties (extension-only class)
%Sprite {
    width:$Sprite-size; height:$Sprite-size; // must restrict viewport, otherwise other sprites may "bleed through"
    // could set shared standard tilesheet `background-image: url(...)`
    // other standard styles, like `display:inline-block` or `position:absolute`
}

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math
@mixin Sprite-offset($xoffset:0, $yoffset:0, $increment:$Sprite-size, $padding: $Sprite-padding) {
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding));
}

@ jose-faetiによる答え のようなスプライトから背景を「フロートさせる」には、 プレースホルダー要素を含む が必要であることを示します

<div class="float-bg">
    <div class="bg"></div>
    <p>Lorem ipsum dolor si...</p>
</div>

次のようなスタイルで：

.float-bg .bg {
    @extend %Sprite; // apply sizing properties
    background-image: url(...); // actually set the background tiles

    @include Sprite-offset(4);

    // specific configuration per accepted answer
    position:absolute;
    top: 0;
    right: 0;
}

私の元の答えでは、 ボタンのリストを作成する に対して、次のことができました：

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky';

.btns > * { @extend %Sprite; background-image:... } // apply sizing properties, bg

// autoassigns positioning
@for $i from 1 through length($buttons) {
    $btn: nth($buttons, $i);
    .btn-#{$btn} {
        // @extend .Sprite;
        @include Sprite-offset( $i - 1 );
    }
}

のような で動作します：

<ul class="btns">
    <li class="btn-help">...</li>
    <li class="btn-font">...</li>
    <li class="btn-save">...</li>
    <li class="btn-export">...</li>
    <li class="btn-etc">...</li>
    <li class="btn-etc">...</li>
</ul>
2
drzaus

top rightまたは正確なピクセル位置、両方ではありません。

また、大きな要素の背景として使用するために、画像Spriteの小さな部分をロードすることはできません。その中に、スプライトのサイズの小さな要素を配置する必要があります。

0
GolezTrol

background-positionの代わりにbackground-Originを使用してチェックアウトします。

指定できるバックグラウンド位置は1つだけで、現在は（-215px -759px）と（右上）の2つがあります。

0
bdparrish