我能在ASP.NET按钮上添加图片吗？

Question

我想要添加一张图片，替代默认按钮。

我已经有了一个适用于该图片的CSS类，这样做可以吗？

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

我现在正在尝试，但图片被压缩了。也许是CSS问题？

- Blankman

---

是的，你可以做到这点，只需确保在你的CSS中设置类的宽度和高度以防止挤压。 - Mitchel Sellers

ASP.NET 的哪个版本？这是相关的信息。 - Josh Stodola

Answer 1

为什么不使用ImageButton控件呢？

- Tim S. Van Haren

---

我正在为一个已有的应用程序进行样式设计，它已经与事件相关联了等等。 - Blankman

使用与您的按钮相同名称的图像按钮，它将捕获所有事件。 - orandov

不，它不能。使用“+= new EventHandler”会导致错误，必须使用“ImageClickEventHandler”。 - Blankman

我选择了ImageButton，但当点击时，按钮图像看起来很奇怪。 - Blankman

当我添加图像按钮时，图像的 URL 是类似于“localhost/Images/....”这样的本地 URL。如果我想将该项目放到服务器上（从我的本地复制项目到生产服务器上），会发生什么？链接是否能够正确更改？ - abidinberkay

@abidinberkay 给出链接为“/images/fwac.gif”或其他。 “”表示“使用当前域和上下文”。如果您没有使用上下文，您可以只提供相对链接。 - Jay

Answer 2

尽管您可以使用以下 CSS 将按钮替换为图像...

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

在这里最好使用ImageButton控件，因为它允许您使用替代文本（用于辅助功能）。

- Josh Stodola

Answer 3

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

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

- Banzor

Answer 4

我不确定我是否完全理解了问题所在。在 ASP 按钮中添加图像是可以的，但这取决于它的设置是否正确。通常情况下，在 asp 按钮上放置背景图像会导致按钮形状不正确，或者是一个带有文本覆盖的背景图像，因为缺少图像标记。例如，上面带有“提交查询”的图像。

作为一种简单的方法，我在整个网站上使用一个“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中使用该图像。

完成。

- Chris

---

你正在使用 ImageButton，而不是 Button。问题是想知道标准的 Button 是否可以包含图像。 - Beska

Answer 5

假设有一个名为 "image" 的 Css 类：

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

如果您不知道图像的宽度和高度，可以使用JavaScript动态设置。

- Armstrongest

Answer 6

您可以将图片添加到 ASP.NET 按钮中，不需要仅使用图像按钮或链接按钮。在浏览器上显示按钮时，默认情况下会将其转换为 HTML 按钮。因此，您可以使用“Style”属性来添加图像。我的示例如下。希望对您有用。

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

您可以使用以下方法更改图像位置

background-repeat

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

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

- Mahmut EFE

Answer 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" />

- user1758332