我可以将图像添加到 ASP.NET 按钮吗？

Posted 2023-03-06

【中文标题】我可以将图像添加到 ASP.NET 按钮吗？

【英文标题】：Can I add an image to an ASP.NET button?

【发布时间】：2011-01-31 09:50:53

【问题描述】：

我想添加一个图像，而不是默认按钮。

我已经有一个图像的 CSS 类，这可以工作吗？

<asp:Button ID="..." CssClass=""/>

我现在正在尝试，图像都被弄乱了。可能是 CSS 问题？

【问题讨论】：

是的，你可以这样做，只要确保在你的 CSS 中设置类的宽度和高度，以防止被挤压

什么版本的 ASP.NET？这是相关信息。

【参考方案1】：

为什么不使用ImageButton 控件？

【讨论】：

我正在设计一个现有的应用程序，它已经有与之相关的事件等等。

使用与您的按钮同名的图像按钮，它将获取所有事件。

实际上不会，+= new Eventhandler 中断，必须使用 ImageClickEventhandler

我选择了图片按钮，点击时按钮图片看起来很有趣。

当我添加图片按钮时，图片的 url 类似于“localhost/Images/....”，所以它包含本地 url。当我想将该项目放入服务器时会发生什么（将项目从本地复制到生产服务器？）链接是否正确更改？

【参考方案2】：

虽然您可以使用以下 CSS 将按钮“替换”为图像...

.className 
   background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
   border: 0;
   height: 61px;
   width: 250px

...这里最好使用 ImageButton 控件，因为它允许您使用替代文本（为了便于访问）。

【参考方案3】：

我实际上更喜欢使用 html 按钮表单元素并将其设置为 runat=server。按钮元素可以在其中包含其他元素。您甚至可以使用 span 或 strong 在其中添加格式。这是一个例子：

<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>

【参考方案4】：

我不知道我是否完全明白问题所在。您可以将图像添加到 ASP 按钮中，但这取决于它的设置方式是否适合它。将背景图像放入 asp 按钮会定期为您提供形状不规则的按钮或带有文本覆盖的背景图像，因为它缺少图像标签。例如顶部带有“SUBMIT QUERY”的图片。

作为一种简单的方法，我在我的网站上使用了一个“blankspace.gif”文件。它是一个 1x1 像素的空白 gif 文件，我调整它的大小以替换网站上的图像。

因为我不使用 CSS 替换图像，所以我使用 CSS Sprites 来减少查询。我的网站最初是 150kb 的主页，并且有大约 140-150 个请求来加载主页。通过创建一个精灵，我取消了将图像大小压缩到大小的一小部分的请求，它可以完美运行，并且您需要图像文件来正确调整大小的任何区域只需使用相同的 blankspace.gif 图像。

<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /

如果您看到上面的类在 css 中加载背景图像，但这会留下带有“提交查询”文本的按钮，因为它需要图像，因此用预加载的图像替换它意味着您摆脱了请求并且仍然在 css 中有图像。

完成。

【讨论】：

您使用的是 ImageButton，而不是 Button。问题是看看标准按钮是否可以包含图像。

【参考方案5】：

您可以将图像添加到 asp.net 按钮。你不需要只使用图像按钮或链接按钮。在浏览器上显示按钮时，默认转换为 html 按钮。因此，您可以使用其“样式”属性来添加图像。我的例子如下。我希望这个对你有用。

Style="background-image:url('Image/1.png');"

您可以使用 using 更改图像位置

background-repeat

属性。所以你可以写一个像下面这样的按钮：

<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>

【参考方案6】：

假设“图像”的 Css 类：

input.image  
  background: url(/i/bg.png) no-repeat top left; 
  width: /* img-width */; 
  height: /* img-height */ 

如果不知道图片的宽高是多少，可以用javascript动态设置。

【参考方案7】：

.my_btn 
  font-family:Arial; 
  font-size:10pt; 
  font-weight:normal; 
  height:30px; 
  line-height:30px; 
  width:98px; 
  border:0px;
  background-image:url('../Images/menu_image.png'); 
  cursor:pointer;


<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />