【问题标题】:Can I add an image to an ASP.NET button?我可以将图像添加到 ASP.NET 按钮吗?
【发布时间】:2011-01-31 09:50:53
【问题描述】:

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

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

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

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

【问题讨论】:

  • 是的,你可以这样做,只要确保在你的 CSS 中设置类的宽度和高度,以防止被挤压
  • 什么版本的 ASP.NET?这是相关信息。

标签: asp.net css button


【解决方案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" />
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2018-11-30
            • 2020-08-24
            • 1970-01-01
            • 2016-05-01
            • 2018-07-01
            相关资源
            最近更新 更多