如何在表单按钮中自动调整背景图像的大小？

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宽度调整为120像素？

如何在此页面中完成此操作？

因为我想为不同的网页按钮使用相同的宽度按钮背景图片，文字长度各不相同。

Answer 1

这不是一张背景图片，只有两张。按钮是div中的跨度：

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

div上的背景图像显示按钮的左侧，跨度上的背景图像显示按钮的右侧。该技术被称为“CSS滑动门”。看看this article。