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

15

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

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

Я не уверен, что я понимаю. Чтобы уточнить несколько:

Все элементы имеют стиль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-е изображение)

Проверьте ответ на этот вопросstackoverflow.com/questions/2430206/... может быть возможным решением? Devin Crossman
@ 3rror404 62 изображения ... Это потребовало бы спрайта IMO. Rudie
S, ASS или LESS CSS предварительная обработка может помочь сделать это проще Devin Crossman
@DevinCrossman Не думаю, что это так. Только сделать спрайт проще. Препроцессоры не улучшают CSS. Если это невозможно в CSS, это невозможно с препроцессором. 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>и это очень дорого, даже если они видны только частично. Это очень умно, хотя =) Мне нравится. Rudie
13

просто используйте процентную позицию.

background-position: 0 3.28%;

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

Даже лучше:background-position: 0 -webkit-calc(100% / 62 * 0) jsfiddle.net/rudiedirkx/g4RQx Rudie
Все твое, @rafaelcastrocouto. Спасибо! Rudie
61 вместо 62. Результат:games.webblocks.nl Rudie
Отличный ответ! это должно получить награду. Dom
@ Правильно, если вы воспользуетесь этим подходом, я предлагаю добавить к изображению достаточную длину (даже если это просто пустое место), чтобы обеспечить легкий процент - то есть сделать его длинным в 100 * 91 пикселей, и ваши числа будут простыми и не округлены. Matthew
-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 не очень полезно.transform: scale действительно самый простой, но у меня было очень плохое выступление. (Последняя попытка сработала хорошо.) Я в основном искал новые яркие идеи. Есть какой-либо? Rudie
Исходные изображения 91 * 91, которые составляют 1 спрайт. Я имел в виду. Согласен наtransform: scale, Вероятно, почему это было изобретено тоже =) Может бытьzoom: 1.3 хотя тоже работает .... с отрицательными полями ... оо, попробую. Rudie
ОК,! Важно было бы возможность (лично я никогда не использую его), но, как уже было сказано, это не поможет, потому что AFAIK нет CSS-решения. И что касается JS ..., если порядок элементов не является порядком спрайтов, вы также можете использовать текущую координату фонового изображения для вычисления нового. "Я в основном искал яркие новые идеи. Есть какие-нибудь?" Нет, не совсем! Потому что imho имеет смысл использовать один рисунок (вместо 60 и более). И, к сожалению, нет другого способа, кроме преобразования масштаба, достичь своей цели с помощью CSS. Netsurfer
-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;
}

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

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-transform-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;
}

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

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

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

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