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

我有一个鼠标经过图像是利用一个大的背景图像的不断变化是根据哪个区域鼠标在背景位置。是否可以加载图像，将其缩放到内存中并将其分配为背景图像的uri？

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

问题是我试图使图像可缩放。使用正常的<img>标签，我可以指定宽度/高度，并且可以缩放，但不存在背景图像的此类属性，那么您使用的是什么解决方案？

CSS3有一个背景-size属性，但不是所有的用户有一个CSS3兼容的浏览器...

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

笨重，但我得到了它，使用此布局

<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" />

GGG的回答这样的工作，我只需要指定一次容器宽度（DIV）。图像缩放到宽度（100％），高度自动计算使用相同的比例。映射的透明图像完全填充容器。

来源

2012-03-12 RichardTheKiwi

你回答了你自己的问题，这是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; }

现在你可以在img中设置的top和left CSS属性与之前设置background-position属性的方式相同。

来源

2012-03-12 07:50:28

你能呈现出的jsfiddle与它的工作呀？ – RichardTheKiwi 2012-03-12 07:52:42

@Richardakacyberkiwi当然，如果你可以发布图片，我会设置它。这与你正在做的事情非常类似，除了改变背景位置之外，你改变图像位置。 – 2012-03-12 07:54:36

请参阅@Richardakacyberkiwi你就会意识到，如果缩放这你就必须重做图像'map'以及根据卢卡斯的回答 – RichardTheKiwi 2012-03-12 07:59:13

您可以CSS3 background-size属性用于此& IE浏览器就可以使用IE浏览器的过滤器。

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

入住这http://reference.sitepoint.com/css/filter

来源

2012-03-12 07:49:43 sandeep

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

但它不是完全一样的是CSS3兼容的浏览器中。

来源

2012-03-12 07:54:07 ZER0

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

回答

相关问题