css sprite в качестве фона, ограниченная часть?

Question

Мне нужно разместить иконку 48x48 в качестве фона. У меня есть этот значок в моем спрайте изображений, где, конечно, есть много других изображений.

Есть ли способ показать в качестве фона только часть изображения?

спасибо

РЕДАКТИРОВАТЬ: Есть ли способ сделать это без установки ширина-высота фонового элемента? (Я не уверен, что если можно точно установить ширину-высоту)

Edit2: это то, что мне нужно: http://jsfiddle.net/pdxnj/

Спасибо

Answer 1

Установите ширину и высоту элемента на 48 пикселей.

.element{
    width: 48px;
    height: 48px;
}

Установите фон элемента для вашего изображения

.element{
    background-image: url('image.png');
}

Переместите фон так, чтобы верхний левый угол значка располагался правильно.

.element{
    background-position: 20px 94px;
}

Два числа в background-position являются координатами X и Y (соответственно), где левый верхний угол вашего 48px на 48px находится в вашем изображении спрайта. Так что, может быть, это на самом деле 96px 0px или что-то.

EDIT

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

Это будет выглядеть примерно так:

<div id="noControl">
    <span id="justCreated">
    </span>
</div>

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

#justCreated{
    display: inline-block;
}

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

Если у вас есть контроль над новыми элементами DOM и вы хотите, чтобы ваш спрайт был фоновым, не мешая промежутку, просто добавьте еще один div внутри исходного.

будет выглядеть как:

<div id="noControl">
    <div id="justCreated">
        ALL of the content that used to be inside #noControl
    </div>
</div>

и CSS для него будет

#justCreated{
    width: 48px;
    height: 48px;
    background-image: url('image.png');
    background-position: 96px 0px;

    z-index: -200;
    /* z-index of all the contents needs to be not set, or set to larger than -200 */
}

Это все теоретически, но ДОЛЖНО работать.

Таким образом, вы можете применить размер спрайта к элементу блока, не вмешиваясь во встроенные элементы. Это может повлиять на CSS, если он обращается к элементам по дочернему статусу (например, #noControl > a), потому что вы вставляете div между родителем и дочерним элементом.

Я все еще исследую, можете ли вы сделать это вообще, если у вас вообще нет контроля над DOM.

Answer 2

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

Answer 3

Лучше использовать :: before или :: after, чтобы вы могли легко определить размер изображения без проблем с переполнением!

Answer 4

это будет зависеть от того, сколько пробелов вокруг него в спрайте, будет ли он соответствовать тому, где вам нужно, без показа частей других изображений ... однако вы можете, например, поместите диапазон, где вы хотите изображение и обрезать диапазон до 48x48, чтобы он показывал только сам значок. это зависит от того, для чего вы хотите его использовать и как построен спрайт

Answer 5

Это возможно. Вам нужно отобразить это в div 48x48, затем установить стиль position: absolute для div и определить для него left и top. Также установите z-index: 0 для div, чтобы он отображался под всем.

Answer 6

Вы можете, если вы не собираетесь устанавливать повторяющийся фон. В противном случае нет.

Для этого вам нужно поэкспериментировать со смещением фона и шириной / высотой фактического элемента, для которого вы устанавливаете фон.