html - 使用 CSS sprites 作为图像类型的输入

Question

我正在创建一个引用图像的 ImageButton，其中包含多个图标。我试图通过定位背景图像来显示正确的图标，但这不起作用。以下是我创建 ImageButton 的方法:

ImageButton closeButton = new ImageButton();
closeButton.CommandName = "CloseItem";
closeButton.ID = "BtnClose";
closeButton.Width = 16;
closeButton.Height = 16;
closeButton.ImageUrl = "/_layouts/15/1031/images/formatmap16x16.png?rev=23.gif";
closeButton.Style.Add(HtmlTextWriterStyle.Top, "-115");
closeButton.Style.Add(HtmlTextWriterStyle.Left, "-275");
closeButton.OnClientClick = btn.OnClientClick;
this.Controls.Add(closeButton);

这会产生以下 HTML:

<input type="image" 
       name="ctl00$ctl40$g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80$ctl00$toolBarTbl$RightRptControls$ctl02$BtnClose" 
       id="ctl00_ctl40_g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80_ctl00_toolBarTbl_RightRptControls_ctl02_BtnClose" 
       src="/_layouts/15/1031/images/formatmap16x16.png?rev=23.gif" 
       onclick="STSNavigate('http:\u002f\u002fespseis13\u002fsharechange\u002fdefault.aspx');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl40$g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80$ctl00$toolBarTbl$RightRptControls$ctl02$BtnClose&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
       style="height:16px;width:16px;top: -115px;left: -275px">

我显示的图像是这个:

我无法轻松切换输入类型，因为它需要属性 CommandName = "CloseItem"。有谁知道，我如何移动(而不是缩放!)由 image 类型的 input 引用的图像？

Answer 1

实际上，可以使用 CSS sprite 作为图像类型的输入；但作为背景图片。

您可以将透明图像分配给src属性并使用background属性为输入元素添加/定位背景图像。

例如:

<input type="image" src="path/to/transparent.png" alt="Cut" />

input[type="image"] {
  width: 24px;
  height: 26px;
  border: 1px solid gray;
  background: url(/image/byld6.png) -60px 0 no-repeat;
}

<强> WORKING DEMO 。