如何在表單按鈕內自動調整背景圖片的大小？

Question

我的問題是：

有「加入購物車」按鈕，頁面上：http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white

.button { 
background: url("/sites/all/themes/flexcart/images/button_cart.png") no-repeat scroll right top transparent; 
height: 25px; 
line-height: 25px; 
padding-right: 5px; 
} 

「添加到購物車」按鈕的背景是大（279px寬），但在這個頁面中，適合帶有文本「添加到購物車」和相同背景120px寬的按鈕。 這個背景圖像是如何從279px到120px寬度自動調整大小的？

這是如何在此頁面完成的？

因爲我想使用相同的寬度不同的web按鈕的按鈕背景圖像，具有不同的文本長度。

Answer 1

這不是一個背景圖像，它是兩個。該按鈕是一個div內的跨度：

<div class="button"><span>button text</span></button> 

上在div背景圖像示出了按鈕和上跨度的背景圖像的左側示出了按鈕的右側。該技術被稱爲「CSS滑動門」。看看this article。