Вопрос по css-sprites, background-position, css – Использование Css Sprites и положение фона

18

У меня есть элемент div, скажем, шириной 200px и высотой 200px. Мне нужно маленькое изображение, чтобы появиться в верхнем правом углу div. Как обычно это можно было бы сделать с

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

Однако проблема в том, что я загружаю изображение из спрайта, и когда я использую что-то вроде

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

спрайт, кажется, не выбирает его из правильного места. Какая-то другая часть спрайта загружена. Можно ли загрузить изображение из спрайта и использовать атрибут background-position. Заранее спасибо...

Ваш Ответ

5   ответов
0

Вы можете указать только одну фоновую позицию, и сейчас у вас есть две (-215px -759px) и (вверху справа).

к несчастьюbackground-origin еще худший сценарий, чем:before решение из-за поддержки, начиная с IE9 и:before псевдокласс начиная с IE8. avall
2

(обновлено, чтобы фактически ответить на заданный вопрос; также см.живой пример)

// ----------- 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>
29

ух разных направлениях.

#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;
}
13

Вы можете использовать:before псевдокласс, как это:

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

но это пока плохо поддерживается.

Мой совет - сделать еще один элемент внутри вашей обертки и расположить его абсолютно так же, как указано выше.:before но например настоящийdiv

РЕДАКТИРОВАТЬ

Еще один хитрый способ использования спрайтов в углах ящиковописано здесь .

Это, кажется, лучший способ сделать это в настоящее время. Совместим в современных браузерах и IE8 +. cfx
0

top right или точное положение пикселя, а не оба.

Кроме того, вы не можете загрузить небольшую часть спрайта изображения для использования в качестве фона для более крупного элемента. Вам нужно будет поместить в него небольшой элемент размером со спрайт.

Позиция в пикселях - это выбор части спрайта. Однако эта часть спрайта должна появиться ТОЛЬКО в верхнем правом углу div. Есть ли способ, которым это можно сделать с помощью спрайтов? Maxim Dsouza
Это было частично решено, поскольку я понял, что то, что я искал, не могло быть достигнуто ... Maxim Dsouza
Вы можете сделать небольшой div, который имеет размер спрайта и дать ему фон спрайта, как вы обычно это делаете. Затем поместите этот div в ваш 200px * 200px div и дайте спрайт divposition: absolute; top: 0; right: 0;, Родитель должен иметьposition: relative или жеposition: absolute тоже, или позиционирование не будет работать должным образом. GolezTrol
@MaximDsouza Ваша проблема уже решена? GolezTrol

Похожие вопросы