如何自动调整表单按钮内背景图像的大小？
我的问题是：
页面上有“添加到购物车”按钮： 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 宽），但在此页面中，它非常适合带有文本“添加到购物车”和相同背景 120 像素宽的按钮。 该背景图像的宽度如何自动从 279 像素调整为 120 像素？
在此页面中这是如何完成的？
因为我想对不同的网页按钮使用相同的宽度按钮背景图像，并具有不同的文本长度。
My question is:
There is "Add to Cart" button on page: 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;
}
the "Add to cart" button background is big(279px wide), but in this page, it fits well for the button with text "Add to Cart" and same background 120px wide.
How is this background image got automatically resized from 279px to 120 px width?
How this is done in this page?
Because I want to use same width button background image for different web buttons, with varying text lengths.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不是一张背景图片，而是两张。该按钮是 div 内的一个 span：
div 上的背景图像显示按钮的左侧，span 上的背景图像显示按钮的右侧。该技术被称为“CSS 滑动门”。请查看这篇文章。
It's not one background image, it's two. The button is a span within a div:
The background image on the div shows the left side of the button and the background image on the span shows the right side of the button. The technique is called "CSS sliding doors". Have a look at this article.