Использование CSS спрайтов и фоновой позиции
у меня есть элемент div, скажем, ширина 200px и высота 200px. Мне нужно небольшое изображение, чтобы появиться в правом верхнем углу div. Как это обычно делается с
background: url(/images/imagepath.png) top right;
однако проблема в том, что я загрузка изображения из спрайта и когда я использую что-то вроде
background: url(/web/images/imagepath.png) -215px -759px top right;
спрайт, похоже, не выбирает его из правильного места. Загружена какая-то другая часть спрайта. Можно ли загрузить изображение из Sprite и использовать атрибут background-position также. Спасибо заранее...
5 ответов
вам нужно указать координаты для вашей позиции элемента и фоновой позиции двумя разными способами.
#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
редактировать
еще один хитрый способ использования спрайтов в углах коробки описано здесь .
если вы можете использовать препроцессор, такой как 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>
вы указать top right
или точное положение пикселя, а не оба.
кроме того, вы не можете загрузить небольшую часть спрайта изображения для использования в качестве фона для большего элемента. Вам нужно будет поместить в него небольшой элемент, который имеет размер спрайта.
проверьте, используя background-origin вместо background-position.
вы можете указать только одну фоновую позицию, и прямо сейчас у вас есть два (- 215px-759px) и (вверху справа).