如何使按鈕大小等於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

來源

2012-02-22 CodeBlue

試試，CSS，

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

應該這樣做，所有的按鈕。

來源

2012-02-22 18:20:32 ACarter

謝謝你。有效！我還有一個問題很快就會出現。 – CodeBlue 2012-02-22 18:30:01

不客氣。開火！ – ACarter 2012-02-22 18:33:11

使用圖像作爲按鈕和大小的按鈕相應的CSS背景。

更好：使用帶有display：block的A標籤並在那裏使用CSS背景。

來源

2012-02-22 18:18:17

我在CSS嘗試這個 - 按鈕 { 背景尺寸：100％100％; } 但它沒有工作 – CodeBlue 2012-02-22 18:19:11

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

難道是有幫助的，而不是使用：

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

來源

2012-02-22 18:20:37

嘗試是這樣的：添加樣式標籤：

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

來源

2012-02-22 18:26:48 jonycheung

使用圖像作爲按鈕的背景。使按鈕的高度和按鈕的高度與圖片大小相同。如果圖像大小爲60×60，則CSS將

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

這可能會幫助你...

來源

2012-02-22 18:28:18 Asif

如何使按鈕大小等於HTML中的背景圖像大小？

回答

相關問題