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

how to show background image with a button on it

本文关键字：按钮 背景 图像 何显示 显示      更新时间：2024-05-07

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

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

这很好，但问题是，加载背景图像需要几秒钟的时间。

我的要求是显示一个带有背景图像的按钮（我的图像会有一些文本和其他内容）。我还试着在屏幕上画一个带有输入标签和按钮的图像，但不知道如何将按钮放在图像上（目前它们一个接一个地出现）。请给我一个解决方案。

我正在使用IE 8

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

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>
相关文章：