将 CSS 精灵用于图像类型的输入

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"。 有谁知道，我如何移动（而不是缩放！）由input类型引用的图像image？

Answer 1

实际上，可以将 CSS 精灵用于图像类型的输入；但作为背景图像。

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

例如：

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

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

工作演示。