Question

我有一个翻转图像，它利用一个大的背景图像，根据鼠标所在的区域不断改变它的背景位置。

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

问题在于我正在尝试使图像可扩展。使用正常的<img>标签，我可以指定宽度/高度并且它会缩放，但背景图像没有这样的属性，那么您使用什么解决方案？

CSS3具有background-size属性，但并非所有Web用户都具有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和img CSS属性，方法与之前设置background-position属性的方式相同。

Answer 2

你可以为这个＆amp; css3 background-size属性对于IE，您可以使用IE过滤器。

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

选中此http://reference.sitepoint.com/css/filter

Answer 3

您可以尝试在图片上使用clip CSS属性，仅显示您感兴趣的矩形;或者使用overflow : hidden将其包装在DIV中。

但是，与CSS3兼容的浏览器并不完全相同。

是否可以加载图像，将其缩放到内存中并将其指定为背景图像的uri？

3 个答案: