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

Is it possible to load image, scale it in memory and assign it as uri for background-image?

本文关键字：图像 分配 背景 uri 缩放 加载 内存 是否      更新时间：2023-09-26

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

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

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

CSS3 具有背景大小的属性，但并非所有 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%(，高度使用相同的比例自动计算。映射的透明图像完全填充容器。

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

现在，您可以按照之前设置 background-position 属性的相同方式在img上设置 top 和left CSS 属性。

你可以

css3 background-size 属性 对于 IE 和 IE，你可以使用 IE 过滤器。

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

检查此 http://reference.sitepoint.com/css/filter

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

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

相关文章：