Вопрос по css, sprite, background-position – background-size with background-position не масштабирует позицию?

15

ve спрайт из 62 изображений 91 * 91px, что делает все 91 * 5642 px. Oни'отображается в виде динамической сетки, которая увеличивается и уменьшается в зависимости от движения пользователя / указателя. Иногда элемент (std 91 * 91 px) увеличивается, чтобы сделать его 120 * 120 px. Очевидно, я хочу, чтобы фон рос с тем, чтобы все изображение размером 91 * 91 px отображалось во всем элементе размером 120 * 120.

Войтиbackground-size: 100% auto чтобы ширина всегда была идеальной. Проблема сейчас в том, чтоbackground-position ожидает, что его значения также будут обновлены! Все 62 элемента встроеныstyle=background-position etc, Я могу't обновить фоновое положение из встроенного. Я хочу, чтобы фон сначала располагался, а затем изменял размер (масштаб), а не изменял размер, а затем располагал (масштаб в неправильное положение) .I '

я не уверен, что яВ этом есть какой-то смысл. Чтобы уточнить несколько:

Все элементы имеют стиль.width: 91px; height: 91px; background-size: 100% auto;Второе изображение будет иметь встроенный стиль.background-position: 0 -91pxПри наведении на этот элемент он получает стильwidth: 120px; height: 120px; и затем он показывает большую часть 2-го изображения и некоторую часть 1-го, потому что позиционирование происходит после изменения размера = (Если я изменю положение фона (после увеличения / наведения) на0 -120px, он выравнивается правильно. (Но тогда, очевидно, этонеправильно, когда нет увеличения / зависания.)

Очень простым решением было бы использование фактическогоzoom: 1.3 или жеtransform: scale(1.3), но это'ОЧЕНЬ ОЧЕНЬ медленно с переходами.

Я должен что-то упустить. CSS должен быть умнее этого. Спрайт с размером фона ...не невозможно ли это?

Как выглядит спрайт, зависит от меня, поэтому я мог бы сделать так, чтобы он имел сетку 120 * 120 вместо 91 * 91, если бы это было проще ...

РЕДАКТИРОВАТЬ: С примером скрипки:http://jsfiddle.net/rudiedirkx/g4RQx/

Умный ответ 1: background-position: 0 calc(100% / 61 * 2) (61, потому что 62 изображения, 2, потому что 3-е изображение)

SASS или LESS CSS предварительная обработка может помочь сделать это проще Devin Crossman
@DevinCrossman Есть 'решения с отсечением (вроде), но не с фоном. Действительно ли CSS такой странный? Rudie
@ 3rror404 62 изображения ... Это потребовало бы спрайта IMO. Rudie
Использование спрайт-листов во многих ситуациях имеет свои преимущества, но в этом случае избавит от головной боли использование отдельных изображений. Есть ли какая-то конкретная причина, по которой вам нужно использовать спрайт-лист? Turnip

Ваш Ответ

6   ответов
-1

ackground-pos, но у меня другой подход. Это'немного странно ...но это работает! <- скрипка

Так что я'Мы добавили в вашу ссылку промежуток с прикрепленным к нему фоном. И вместо встроенного background-position ive вместо этого использовал высоту в процентах на промежутке, например:

<a href="#">
    <span style="height: 100%"></span>
</a>

И с этим CSS это все, что вам нужно, и изображение исправит все остальное.

a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}

Это больше html и css, которые вам нужны, если вы не используете другие решения, но чем больше способов решить что-то, тем лучше :)

Тот'очень умный! И было бы вполне приемлемо, если бы у меня было всего ~ 10 плиток, но у меня есть 62 и растет, так что это будет ОГРОМНО<span></span>и эторендерить очень дорого, даже если онитолько частично видны Это'очень умный, хотя =) мне нравится. Rudie
3

чем это то, что вам нужно.

DEMO

demo2 с центрированным зумом.

HTML:

 Hover image large transition<br>
    Hover that:<br>

    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>

CSS:

 p {
    margin: 0;
    display: inline-block;

}
a {
    display: block;
    border: solid 10px green;
    /* always: */
    width: 91px;
    height: 91px;
    background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;

    /* inline: */
    background-position: 0 -182px;
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
a:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transfor,m-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

Скрипки:играть на скрипке

Я предлагаю вам добавить translate3d (). Таким образом, вы можете использовать ускорение GPU. Источник:mobile.smashingmagazine.com/2012/06/21/... mtt
Я искал ответ безscale(), Это нене требовалbackground-position решение. Rudie
-1



Встроенные стилиплохой" во всех отношениях. Одним из них является то, что вы не можете переопределить их с помощью какого-либо внешнего CSS (причина их более высокой специфичности). Так что это уже одна из причин, почему не существует чистого решения CSS для вашей проблемы.

Другая причина заключается в том, что вам необходимо пересчитать background-position в зависимости от фактической позиции, соответственно от номера спрайта. Что-то, что вы еще не можете сделать с помощью CSS (например, что-то вроде: background position: 0 calc (nth-child * 91px);)

Таким образом, единственный чистый способ CCS будет использовать преобразование продажи, которое такжедовольно хорошо поддерживается!

Кстати: "Как выглядит спрайт, зависит от меня, поэтому я мог бы сделать так, чтобы он имел сетку 120 * 120 вместо 91 * 91, если бы это было проще ... "

Это было бы лучше, по крайней мере. Уменьшение масштаба всегда лучше, чем масштабирование!

Решение Javascript, особенно с jQuery, довольно просто, с другой стороны, так как вы можете использоватьФункция .index () и так легко вычислить новую фоновую позицию.

Заключение:

На данный момент не существует реального / практического решения для обработки CSS-спрайтов таким способом!

Вы / клиент можете переопределить встроенный стиль с помощью!important, Я могу'использовать jQuery.index() потому что порядок элементов нет порядок спрайтов. Все исходные изображения 91 * 91 = (поэтому сохранение как 120 isn 'Это очень полезно.transform: scale действительно самый простой, но яУ нас была очень плохая работа. (Последняя попытка сработала хорошо.) Я в основном искал новые яркие идеи. Есть какой-либо? Rudie
Хорошо,! Важно было бы возможность (лично я никогда не использую его), но, как уже было сказано, он выигралне помогает, потому что AFAIK нет решения CSS. А насчет JS ..., если порядок элементов неВ порядке спрайтов вы также можете использовать текущую координату фонового изображения для вычисления новой. "Я в основном искал новые яркие идеи. Есть какой-либо?" Нет, не совсем! Потому что imho имеет смысл использовать один рисунок (вместо 60 и более). И, к сожалению, нет другого способа, кроме преобразования масштаба, достичь своей цели с помощью CSS. Netsurfer
Исходные изображения 91 * 91, которые составляют 1 спрайт. Я имел в виду. Согласен наtransform: scale, Вероятно, почему это было изобретено тоже =) Может бытьzoom: 1.3 хотя тоже работает .... с отрицательными полями ... оо, попробую. Rudie
-1

Я обновил,fiddle

Пожалуйста, проверь это,

Если вы укажете такой стиль, это легко решит проблему ...

a {
 display: block; /* always: */
 width: 91px;
 height: 91px;
 background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
 background-size: 100% auto;
 /* inline: */
 background-position: 0% 3.30%; /* this will do the trick */ 
}
a:hover {
 width: 150px;
 height: 150px;
}

Пожалуйста, ответьте, если какие-либо вопросы ...

13

на самом деле довольно просто, просто используйте процентную позицию.

background-position: 0 3.28%;

http://jsfiddle.net/g4RQx/18/

Все твое, @rafaelcastrocouto. Спасибо! Rudie
не сделал. Просто переместитесь в нужное место, чем скопируйте значение = D. Но вы можете легко рассчитать процент (P%), так как у вас есть размер изображения (HI) и размер спрайтов (HS) и положение спрайта, который вы хотите (N). P% = 100 * N * HS / HI rafaelcastrocouto
background-position с% не показываетт работа = (потому что% значение нет означает верх / лево. Это означает только сверху / слева, если это0%, Если это50%, это означает центр / центр. Если это100%, это означает снизу / справа. Черт! Что-нибудь умное для этого @rafaelcastrocouto? Rudie
@rafaelcastrocouto как вы рассчитали этот процент? Danield
5

ным соотношением

a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

FIDDLE

Для справки: в своем вопросе вы упомянули, что масштаб медленный. Я пытался использовать масштаб, и я нене вижу медленных переходов:

a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

FIDDLE

@Danield I 'попробуюscale() снова. Это было очень медленно год назад. Rudie
Это должен быть правильный подход! Это прекрасно работает! Sarin Suriyakoon
Да, Мэтью, ты понял. Я'мне нужно 62 разных:hover состояния в CSS. Неприемлемый. Rudie
Проблема в том, что позиционная часть является встроенной и устанавливается для каждого изображения, поэтому вам нужно установить фоновую позицию для каждого изображения.<a></a> элемент. Matthew
Или - я должен сказать, по крайней мере, так я это понял. Matthew

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