javascript - 当图像都缩放时，如何正确计算图像并将其放置在另一个图像的顶部 - 跨浏览器？

Question

我有一个基础图像，上面有项目。如果用户禁用其中一项，则该项目应显示为已禁用。为了解决这个问题，我使用了禁用项目的第二张图像(png)并将其放置在背景图像上方的正确位置。

当没有缩放时，这在所有浏览器上都能完美运行。

当存在缩放时(例如，在移动浏览器中，图像为原始大小的 40%)，此仅适用于 Firefox。 Firefox 总是将图像放置在正确的位置，覆盖下面的项目。

其他浏览器(Android 上的 Chrome、iOS 上的 Safari)始终会偏离 1-2 像素，具体取决于缩放级别。所以您可以看到下面的一些内容。

我该如何做到这一点才能跨浏览器工作？

var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;

//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
    var disabled = disableds[ i ];

    /**
     * I also tried with "parseInt", but it still doesn't work.
     * 
     * originalLeft/Top/Width/Height are the values saved in 
     * JavaScript when the page is first loaded before everything
     * is scaled.
     */
    disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
    disabled.style.top = ( heightRatio * disabled.originalTop ) + "px";
    disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
    disabled.style.height = ( heightRatio * disabled.originalHeight ) + "px";

    //Make visible
    disabled.style.visibility = "visible";
}

Answer 1

您的背景使用白色还是其他纯色？然后您可以尝试以下操作:在 bg 部分上放置一个空 div，然后应用 background-color: rgba(255, 255, 255, .5) 例如。这应该会给你同样的效果，而且它会节省大量额外的图像。但只有当“你的背景的背景”是纯色时才有效。