CSS：使用图片作为 input 按钮背景图，把多张图片合成一张图片分别调用_

使用图片作为 input 按钮背景图，把多张图片合成一张图片分别调用。

〖源码〗
--------------------------------------------------------
<input type="submit" id="" name="Button_Submit" value="" class="Style_Button_Submit"/>
<input type="reset" id="" name="Button_Reset" value="" class="Style_Button_Reset"/>
<input type="button" id="" name="Button_Add" value="" class="Style_Button_Add"/>
<input type="button" id="" name="Button_Back" value="" class="Style_Button_Back"/>

〖效果〗
--------------------------------------------------------

1、CSS 文件：

.Style_Button_Add {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll 0px 0px;cursor:pointer;}
.Style_Button_Back {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -64px 0px;cursor:pointer;}
.Style_Button_Backup {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -64px -24px;cursor:pointer;}
.Style_Button_Browse {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -64px -48px;cursor:pointer;}
.Style_Button_Cancel {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px 0px;cursor:pointer;}
.Style_Button_Cancellation {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -24px;cursor:pointer;}
.Style_Button_Compress {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -48px;cursor:pointer;}
.Style_Button_Confirm {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -72px;cursor:pointer;}
.Style_Button_Copy {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -96px;cursor:pointer;}
.Style_Button_Create {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -120px;cursor:pointer;}
.Style_Button_Cut {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -128px -144px;cursor:pointer;}
.Style_Button_Decompression {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -192px 0px;cursor:pointer;}
.Style_Button_Delete {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -192px -24px;cursor:pointer;}
.Style_Button_Disable {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -192px -48px;cursor:pointer;}
.Style_Button_Download {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -192px -72px;cursor:pointer;}
.Style_Button_Drawback {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -192px -96px;cursor:pointer;}
.Style_Button_Edit {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -256px 0px;cursor:pointer;}
.Style_Button_Empty {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -256px -24px;cursor:pointer;}
.Style_Button_Enabled {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -256px -48px;cursor:pointer;}
.Style_Button_Execute {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -256px -72px;cursor:pointer;}
.Style_Button_Exit {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -256px -96px;cursor:pointer;}
.Style_Button_Forward {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -320px 0px;cursor:pointer;}
.Style_Button_Goto {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -384px 0px;cursor:pointer;}
.Style_Button_Help {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -448px 0px;cursor:pointer;}
.Style_Button_Hidden {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -448px -24px;cursor:pointer;}
.Style_Button_HTML {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -448px -48px;cursor:pointer;}
.Style_Button_List {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -704px 0px;cursor:pointer;}
.Style_Button_Login {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -704px -24px;cursor:pointer;}
.Style_Button_Lookup {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -704px -48px;cursor:pointer;}
.Style_Button_Modify {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -768px 0px;cursor:pointer;}
.Style_Button_New {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -832px 0px;cursor:pointer;}
.Style_Button_Open {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -896px 0px;cursor:pointer;}
.Style_Button_Option {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -896px -24px;cursor:pointer;}
.Style_Button_Paste {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px 0px;cursor:pointer;}
.Style_Button_Play {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px -24px;cursor:pointer;}
.Style_Button_Preview {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px -48px;cursor:pointer;}
.Style_Button_Printing {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px -72px;cursor:pointer;}
.Style_Button_Publish {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px -96px;cursor:pointer;}
.Style_Button_Purview {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -960px -120px;cursor:pointer;}
.Style_Button_Read {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px 0px;cursor:pointer;}
.Style_Button_Recovery {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -24px;cursor:pointer;}
.Style_Button_Register {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -48px;cursor:pointer;}
.Style_Button_Reload {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -72px;cursor:pointer;}
.Style_Button_Rename {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -96px;cursor:pointer;}
.Style_Button_Replace {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -120px;cursor:pointer;}
.Style_Button_Reply {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -144px;cursor:pointer;}
.Style_Button_Reset {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -168px;cursor:pointer;}
.Style_Button_Run {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1088px -192px;cursor:pointer;}
.Style_Button_Save {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px 0px;cursor:pointer;}
.Style_Button_Search {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -24px;cursor:pointer;}
.Style_Button_Select_All {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -48px;cursor:pointer;}
.Style_Button_Select_Clear {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -72px;cursor:pointer;}
.Style_Button_Select_Reverse {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -96px;cursor:pointer;}
.Style_Button_Set {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -120px;cursor:pointer;}
.Style_Button_Statistics {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -144px;cursor:pointer;}
.Style_Button_Stop {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -168px;cursor:pointer;}
.Style_Button_Show {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -192px;cursor:pointer;}
.Style_Button_Submit {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1152px -216px;cursor:pointer;}
.Style_Button_Update {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1280px 0px;cursor:pointer;}
.Style_Button_Upgrade {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1280px -24px;cursor:pointer;}
.Style_Button_Upload {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1280px -48px;cursor:pointer;}
.Style_Button_Unread {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1280px -72px;cursor:pointer;}
.Style_Button_View {width:64px;height:24px;border:0px;background:transparent url('Buttons_64-24.png') no-repeat scroll -1344px 0px;cursor:pointer;}

2、图片按钮（共计60+个按钮）：

【打包下载】

文章作者：啊估整理