如何使按钮大小等于HTML中的背景图像大小？

问题描述：

我有以下代码。问题是，我没有成功使按钮大小等于背景图像大小。背景图像的大小是60x60像素。我应该如何编码？如何使按钮大小等于HTML中的背景图像大小？

<tr> 
       <td><button style="width: 60px; height: 60px;"><img src="darkSquare.jpg" /></button></td> 
       <td><button style="width: 60px; height: 60px;"><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
      </tr> 
      <tr> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
       <td><button><img src="darkSquare.jpg" /></button></td> 
       <td><button><img src="lightSquare.jpg" /></button></td> 
      </tr>

我得到以下输出 -

enter image description here

答

试试，CSS，

button { 
    background-image:url('www.example.com/image.jpg'); 
    width:50px; /* or whatever */ 
    height:30px; /* or whatever */ 
}

应该这样做，所有的按钮。

谢谢你。有效！我还有一个问题很快就会出现。 – CodeBlue 2012-02-22 18:30:01

不客气。开火！ – ACarter 2012-02-22 18:33:11

答

使用图像作为按钮和大小的按钮相应的CSS背景。

更好：使用带有display：block的A标签并在那里使用CSS背景。

我在CSS尝试这个 - 按钮 { 背景尺寸：100％100％; } 但它没有工作 – CodeBlue 2012-02-22 18:19:11

您需要调整PIXELS中的元素以匹配图像的大小。不是百分比。 – 2012-02-22 18:20:20

答

难道是有帮助的，而不是使用：

<input type='image' src='lightSquare.jpg'/>

答

尝试是这样的：添加样式标签：

<style> 
.darkSquare{ 
    background: url('darkSquare.jpg') no-repeat; 
} 
.lightSquare{ 
    background: url('lightSquare.jpg') no-repeat; 
} 
.btn{ 
    width:60px; 
    height:60px; 
    background:#FFF; 
    border:0; 
} 

</style>

现有的代码更改为：

<tr> 
    <td><button class="btn darkSquare"/></td> 
    <td><button class="btn lightSquare"/></td> 
</tr>

答

使用图像作为按钮的背景。使按钮的高度和按钮的高度与图片大小相同。如果图像大小为60×60，则CSS将

button { 
display:block; 
width:60px; 
height:60px; 
background: url(image.jpg) no-repeat top center; 
}

这可能会帮助你...

如何使按钮大小等于HTML中的背景图像大小？

相关推荐