是否可以加載圖像，將其縮放到內存中並將其分配爲背景圖像的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？

回答

相關問題