Question

我一直在网上处理多种解决方案，但没有发现任何可行的解决方案。

我正在尝试做一些应该简单的事情。我想要一个＆＃34;按钮的图像＆＃34;在一个实际的按钮下面。当我这样做时，图像总是与按钮本身重叠。

HTML：

<div id="button">       <!-- Container for my image and button -->          
    <img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png"  />
    <input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>  
</div>

CSS：

#button {
    height:30px;
    padding:3px;
    position:relative;

}

input[type=button] { 
font: 12px verdana,arial,sans-serif; 
width: 86px; 
float:left;
z-index:0;
}

Answer 1

不要使用实际图像（您无法放置任何内容），只需将其设为背景图像即可。

CSS：

#button {
    height:30px;
    padding:3px;
    position:relative;
    background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
    background-repeat: no-repeat;

}

input[type=button] { 
font: 12px verdana,arial,sans-serif; 
width: 86px; 
float:left;
z-index:0;
}

Answer 2

<强> jsBin demo

如果需要，请使用#button的背景图片

<div id="button">
  <input type="button" value="Roofing"/>    
</div>

CSS：

#button {
  width:90px;
  height:30px;
  padding:3px;
  position:relative;
  background: url(Images\buttonUnclicked.png);
}
#button > input { 
  position:absolute;
  left:5px;
  top:6px;
  width: 86px; 
}

Answer 3

如果您在CSS中调整左侧和顶部的数字，则可以移动图片。我在HTML中调用了#myImage图片。希望有所帮助。

CSS

#myImage{
position:absolute;
left:10px;
top:50px;
}

#button {
    height:30px;
    padding:3px;
    position:relative;

}

input[type=button] { 
font: 12px verdana,arial,sans-serif; 
width: 86px; 
float:left;
z-index:0;
}

HTML

<div id="button">       <!-- Container for my image and button -->          
    <img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png"  />
    <input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>  
</div>

将图像放在按钮下方

3 个答案: