信各位一定碰到過這種情況，按鈕作為DIV的背景圖來顯示，實際上有多個這樣的按鈕，而且DIV中的文字，也就是按鈕上要顯示的文字內容和個數都不定，這種情況下就需要用背景圖片拉伸效果來處理了，只需做一個按鈕圖片，作為DIV的背景圖時隨著DIV的寬度或高度自適應就OK了。網上也找過，但不兼容IE或有bug，下面貼出本人親測代碼，兼容主流瀏覽器，包括Firefox、Chrome以及 IE 等主流瀏覽器（IE使用濾鏡效果實現）：

.btn_bg {
width:150px;
height:50px;
background-image:url(./btn.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat/9;
background-image:none/9;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./btn.png’, sizingMethod=’scale’)/9;
}

定義好上述CSS后，就可以在頁面中使用了，例如：

<div class=”btn_bg”></div>

btn_bg樣式中：width和height定義了背景圖默認的寬高，假如這個不定義并且引用該樣式的DIV也不定義寬度，那么背景圖的寬度會拉伸至瀏覽器的寬度，另外可以指定DIV的寬度來拉伸背景圖，如：

<div class=”btn_bg” style=”width:300px”></div>。

細心的你會發現，最后三行代碼每行樣式后都加了 /9 這是指定在IE8及以下瀏覽器中的樣式。