使用 CSS 精灵作为图像类型的输入

Posted 2023-03-05

【中文标题】使用 CSS 精灵作为图像类型的输入

【英文标题】：Using CSS sprites for an input of type image

【发布时间】：2014-04-07 19:03:53

【问题描述】：

我正在创建一个引用图像的 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 引用的图像？

【问题讨论】：

我认为你不能为input[type = image] 使用精灵，可以吗？

伙计，那会很糟糕:(

是的："一个图形提交按钮。您必须使用 src 属性来定义图像的来源，并使用 alt 属性来定义替代文本。您可以使用 height 和 width 属性来以像素为单位定义图像的大小。” developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

【参考方案1】：

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

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

例如：

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

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

WORKING DEMO.