幅 200px、高さ 200px の div 要素があります。div の右上隅に小さな画像を表示する必要があります。通常はどのように行うか
background: url(/images/imagepath.png) top right;
ただし、問題は、スプライトから画像をロードしていて、次のようなものを使用する場合です
background: url(/web/images/imagepath.png) -215px -759px top right;
スプライトは正しい場所からそれを選択していないようです。スプライトの他の部分が読み込まれます。スプライトから画像を読み込んで background-position 属性も使用することは可能ですか? 前もって感謝します...
要素の位置と背景の位置の座標を 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;
}
:before次のような疑似クラスを使用できます。
.element:before {
content:"";
position:absolute;
right:0;
top:0;
width:20px;
height:20px;
background: url(/web/images/imagepath.png) -215px -759px;
}
しかし、これはまだ十分にサポートされていません。
私のアドバイスは、ラップ内に別の要素を作成し、上記のように完全に配置することです:beforeが、たとえば実際のdiv
編集
ボックスのコーナーでスプライトを使用するもう 1 つのトリッキーな方法については、こちらで説明しています。
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>
background-positionの代わりにbackground-originを使用してチェックアウトしてください。
指定できる背景位置は1つだけで、現在は2つ（-215px -759px）と（右上）があります。
You specify either top right or an exact pixel position, not both.
Besides, you cannot load a small portion of an image sprite to use as the background for a larger element. You'll have to put a small element inside it, that has the size of the sprite.