Question

我想添加图片，而不是默认按钮。

我已经有了一个图像的CSS类，这会有用吗？

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

我现在正在尝试，图像全都被碾碎了。也许这是一个CSS问题？

Answer 1

为什么不使用ImageButton控件？

Answer 2

虽然您可以使用以下CSS“替换”带有图像的按钮...

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

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

Answer 3

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

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

Answer 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中有图像。

完成。

Answer 5

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

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

Answer 6

假设Css类为“image”：

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

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

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

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

7 个答案: