因为最近做页面的时候，设计师拿过来的设计稿效果太多，导致各种必需使用图片的问题，为了节省网站的流量，也为了优化页面的seo，想了很多方法来尽量优化页面，以后可以一点点放出，先说说如何用一张图片作出自适应宽度的按钮,比较简单，也算是常用的方法了。

我们要用到的图片是

当然，目的是为了实现一张图片作出可以自自适应宽度的按钮，所以就不需要hover之后的图片了。我们自己做的时候，需要注意，所需要的素菜图需要比实际需要做的按钮的最大宽度还要大。

那么html部分就是

这是一个导航条的一个选项，然后css部分的设置为

li a{

background:url(“素材图片的路径”) no-repeat scroll right top transparent;

color:#f39407;

display:block;

float:left;

line-height:28px;

height:28px;

margin-right:3px;

overflow:hidden;

padding-right:7px;

font-weight:bold;

font-size:13px;

}

.nav li a span{

display:block;

line-height:24px;

padding:1px 1px 3px 11px;

background:url(“素材图片的路径”) no-repeat;

}

关键的属性部分我用黄色和红色字体显示了

就是说，显示按钮的左边部分，的“background-postion:right;”让显示按钮的右边部分中间直角的部分就直接融合了。

padding就是用来控制显示的范围。

实现还是比较容易的。