Background-size с фоновой позицией не масштабирует позицию? - программирование
Подтвердить что ты не робот

Background-size с фоновой позицией не масштабирует позицию?

У меня есть спрайт из 62 изображений 91 * 91px, что делает все это 91 * 5642 px. Они отображаются в виде динамической сетки, которая растет и сжимается в зависимости от движения пользователя/указателя. Иногда элемент (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;, а затем отобразит большую часть второго изображения и некоторую часть 1-го, потому что позиционирование происходит после изменения размера = (
  • Если я изменил положение фона (после масштабирования/наведения) на 0 -120px, он выравнивается правильно. (Но тогда, очевидно, это неправильно, когда не масштабирование/зависание.)

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

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

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

EDIT: Пример скрипта: http://jsfiddle.net/rudiedirkx/g4RQx/

Интеллектуальный ответ 1: background-position: 0 calc(100% / 61 * 2) (61 из-за 62 изображений, 2 из-за третьего изображения)

4b9b3361

ОТВЕТЫ

Ответ 1

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

background-position: 0 3.28%;

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

Ответ 2

В режиме зависания измените положение фона в соответствии с коэффициентом масштабирования

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

Ответ 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;
}

Fiddle: fiddle

Ответ 4

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

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

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

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

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

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

Ответ 5

Я думаю, что ответ должен быть простым,

Я обновил 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;
}

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

Ответ 6

Многие ответы указывают на процент вместо статических пикселей в background-pos, однако у меня есть другой подход. Это немного странно... но он работает! < - fiddle

Итак, я добавил промежуток внутри вашей ссылки с прикрепленным к нему фоном. И вместо вашей встроенной фоновой позиции вместо 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, которые вам нужны, если вы не используете другие решения, но чем больше способов решить что-то, тем лучше:)