Можно ли загрузить изображение, масштабировать его в памяти и назначить в качестве uri для background-image?

Question

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

$(this).mouseover(function() {
    $('#' + id).css('background-position','0 -' + thisoffset + 'px');
})

Проблема в том, что я пытаюсь сделать изображение масштабируемым. С обычными тегами <img> я мог бы просто указать ширину / высоту, и она будет масштабироваться, но такого свойства для background-image нет, так какое решение вы используете?

CSS3 имеет свойство background-size, но не у всех веб-пользователей есть браузер, совместимый с CSS3 ...

=======================

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

<div id="outer"
     style="width:300px;height:330px;position:relative;overflow:hidden;">
<img id="image"
     src="url.gif"
     style="width:100%;height:auto;position:absolute;left:0;bottom:0;z-order:-99;" />
<img id="areamap"
     src="transparent.gif"
     style="width:100%;height:100%;position:absolute;"
     usemap="#map" />

Таким образом, мне нужно указать ширину контейнера только один раз (div). Изображение масштабируется до ширины (100%), а высота рассчитывается автоматически с использованием того же масштаба. Отображаемое прозрачное изображение полностью заполняет контейнер.

Answer 1

Вы ответили на свой вопрос, это свойство CSS background-size.Вы также можете использовать transform.Все это CSS3, до этого не было никакого способа сделать это.

Что вы можете сделать, это использовать обычный img, масштабированный и изменить его положение в пределах div, который обрезает его.

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

<div class="map-outer"><img src="map-sprite.png"></div>

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

.map-outer { height: 500px; width: 500px; overflow: hidden; position: relative; }
.map-outer img { height: 5500px; width: 500px; position: absolute; }

Теперь вы можете установить top иleft Свойства CSS для img точно так же, как вы устанавливали свойство background-position ранее.

Answer 2

Вы можете попытаться использовать clip свойство CSS на изображении, чтобы отобразить только интересующий вас прямоугольник; или оберните это в DIV с overflow : hidden.

Но это не совсем те браузеры, которые совместимы с CSS3.

Answer 3

Вы можете css3 background-size свойство для этого и для IE вы можете использовать IE фильтр.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='images/transparent-border.png',
      sizingMethod='scale');

Проверьте это http://reference.sitepoint.com/css/filter