javascript - 如何显示带有按钮的背景图像

Question

我在 IE 中遇到了背景大小属性的问题。所以，为了弥补这一点，我尝试使用下面的代码

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale')";

这工作正常，但问题是，加载背景图像需要几秒钟。

我的要求是显示一个带有背景图像的按钮(我的图像将包含一些文本和其他内容)。我还尝试在屏幕上绘制带有输入标签和按钮的图像，但无法弄清楚如何将按钮放在图像上(目前它们一个接一个地出现)。请给我一个解决方案。

我正在使用 IE 8

Answer 1

不确定真正的问题是什么(尝试添加更多代码？)但是如果问题是在加载图像之前显示按钮，那么您可以缓存图像并在加载图像时同时显示图像和按钮。

new img = document.createElement('img');
img.onload = function() { /* ... display image and button */ }
img.src = 'http://path/to/your/image';

或者如果问题是定位，使用这个:

<div style="position:relative; width:10em; height:1em">
    <img src="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;">
    <button onclick="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;">
</div>

编辑:如评论中所述:

<div style="position:relative; width:1024px; height:768px; background:url('...');">
    <button onclick="..." style="position:absolute; left:480px; top:376px; width:64px; height:16px;">
</div>