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

【问题标题】：how to show background image with a button on it如何显示带有按钮的背景图像
【发布时间】：2013-12-09 21:17:49
【问题描述】：

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

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

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

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

我正在使用IE 8

【问题讨论】：

标签： javascript html css image internet-explorer

【解决方案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>

【讨论】：

您好，感谢您的解决方案。但我想我的要求对你来说并不清楚。我想在背景中显示全尺寸图像（如 1024X736）并在该图像上绘制一个按钮（在图像的中心）
我已经添加了代码来显示按钮和背景图像，但我不确定这是你想要的。也许如果您包含一些 JSfiddle 示例...
您好，您的解决方案正在运行。 ThanQ :) 你能帮我了解如何将背景图像适合浏览器窗口吗？目前图像的某些部分没有显示（我没有使用你建议的 css 属性，我将它们用作 100%）。我的图像分辨率是 1920X975
查看eclipse.chobits.ch 的源代码，它显示了如何在浏览器窗口的中间居中。希望对你有帮助。
嗨 Radek，我想在背景上显示完整的图像，但这没有发生。如果我想用宽度控制它：1024px；高度：768px；它正在将屏幕绘制到该宽度，并且剩余部分正在被修剪。你能帮我解决这个问题吗？