Question

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

  <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

Answer 1

在CSS中尝试

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

对于所有按钮，应该这样做。

Answer 2

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

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

这可能对你有帮助......

Answer 3

使用图像作为按钮的CSS背景，并相应地调整按钮的大小。

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

Answer 4

使用它代替它是否有用：

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

Answer 5

尝试这样的事情：添加样式标记：

<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>

Answer 6

最近遇到了这个问题，所有答案都要求将图像嵌入按钮而不是原始的html结构。

我对此的解决方案是：

html：

<button style="width: 60px; height: 60px;">
  <img class="img-center" src="darkSquare.jpg" />
</button>

css：

.img-center {
  position: relative;  
  margin: auto;
}

就这么简单！这个答案不需要您更改html结构，特别是对于那些喜欢此结构的人。

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

6 个答案: